Add a new div in Javascript and include an HTML icon inside

This Django project includes a JavaScript function that generates a new div to display certain data.

    for (var i = 0; i < files.length; i++) {
        var newDiv = document.createElement('div');
        newDiv.setAttribute("class","files_div");
        //Use the helper function to determine if it's a PDF
        newDiv.setAttribute("onclick","check_files(this)")
       console.log(files[i]) //Print the files
        newDiv.innerHTML = files[i];
        divParent.appendChild(newDiv);
    }

I am looking to enhance this functionality by adding icons alongside the displayed data. For instance, I want to include a PDF icon for PDF files. How can I incorporate icons in JavaScript once a new div is created?

javascripthtmlcssdjango

Answer №1

Have you thought about using a css-based solution for this issue? You have the option to include an icon into any element by employing pseudo elements. By doing so, another element will be added alongside .pdf, which can be customized to suit your needs. Using background-image enables you to incorporate an icon.

.pdf {
  padding-left: 35px;
  position: relative;
}

.pdf:before {
  content: "";
  height: 20px;
  width: 20px;
  display: block;
  background: url("https://via.placeholder.com/20");
  position: absolute;
  left: 0;
}
<div class="pdf">PDF</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Embedding SVG styling directly into the HTML document

When importing svg images with color into Mapbox Studio, they appear as black and white. The troubleshooting website mentions: If your SVG appears black after adding to Mapbox Studio, it may be due to using style properties in tags instead of inline sty ...

csssvgmapboxadobe-illustrator

The Neovim root_dir problem with Tailwindcss LSP

I'm encountering a problem with the Tailwind LSP in Neovim 0.5 where although the language server is running, I'm not receiving any intellisense when defining a class. My current project is based on Django and Tailwind is properly configured with ...

pythondjangotailwind-csspostcssnvim-lspconfig

Discover the possibilities of implementing variable component titles in qwik!

My aim was to dynamically utilize either HTML <button> or <Link> from Qwik library based on the presence of the href prop. However, it seems that the link is not functioning as expected and clicking on it doesn't produce any result. import ...

javascriptqwik

How do I add an underline to a Bootstrap navbar with spaces on both sides?

I'm currently working on creating a menu using bootstrap 3, and here is the code snippet I have implemented: <section id="menu"> <div class="container-fluid"> <div class="row"> <div cla ...

htmlcsstwitter-bootstrap-3navbar

execute the celery task only if the preceding task has been completed successfully

I have four tasks that need to be run consecutively, only if the previous one is successful. I attempted to chain them together like this, but they are starting off independently. res = (mul.si(5,5) | mul.si(5,6) | mul.si(5,7) | mul.si(5,8) | mul.si(5,9) ...

pythondjangocelery

Is it possible to include a relative URL with a different port number in a hyperlink?

Is it possible to link to a different port number on the same server without using Javascript or server-side scripting, especially if the hostname is unknown? For example: <a href=":8080">Check out the other port</a> (Note that this example ...

html

Reveal a segment of a picture

Is there a way to display only a section of an image using either jQuery or another JavaScript method? For example: image: [ ] [ -------- ] [ - - ] [ - part - ] [ - - ] [ -------- ] [ ...

javascriptjqueryimage

The issue of exceeding margins

I am facing an issue with some CSS. Below is my HTML code: <body> <div id="cn"> <div id="hd"> <ul> <some li's> </ul> </div><!-- /#hd --> <div id="bd"> ...

htmlcss

Adding a class to the following DIV and smoothly transitioning the current one out can be achieved using a dynamic number of items in multiple instances

Is there a way to create a scalable CSS slideshow for text divs without using images? Here is the current HTML structure: <div class="mb-panel-container cf"> <div class="mb-panel-section mb-slider"> <div class="mb-panel active" ...

javascriptjqueryhtmlcssslideshow

Is there a CSS fix for containing a floating div inside another div with overflow hidden?

I've managed to create a cool effect with a div of an airplane inside a parent div that has 'overflow: hidden' applied. This setup gives the illusion that the airplane div is flying from under an element on the page and carrying a banner alo ...

css

What is the best way to trigger an onclick event for an input element with a type of "image"?

In the code I'm working on, there's an input of type "Image". <div class="icon" id="button_dictionary"> <form> <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> ...

javascripthtmlcssimagehtml-input

When CSS media queries are applied, the background color of Div does not fully extend to the edge

Although the problem seems simple, I am finding it difficult to find a solution. This page was created as part of my course. https://i.sstatic.net/DKCva.jpg While in developer mode and trying to resize the screen, I noticed that the background color of ...

javascripthtmlcssuser-interface

Switching Unicode icon when element is clicked

My form has two inputs - one for text input and the other for submitting, like a button. I have added an icon to the submit button and want it to change when clicked. <input class="searchBtn" id="submit" name="submit" type="submit" value="&#xf002"& ...

javascriptjqueryhtmlfont-awesome

The data retrieved by jQuery AJAX is empty when accessed outside of the success handler

Here is a code snippet to consider: let source = null; fetch('https://example.com/data') .then(response => response.json()) .then(data => { source = data; console.log(source); }); console.log(source) When the fetch request ...

javascriptjqueryajax

Node.js Express.js Module for Asynchronous SqLite Operations

Currently, I am working on a task that involves making synchronous requests to a database and passing the data to Express. Here is the code snippet: app.get('/', (req, res) => { let db = new sqlite3.Database('./Problems.db'); ...

javascriptnode.jssqliteexpress

JavaScript's Date() function accurately displays the timezone, but it inconsistently displays the

I have encountered an unusual behavior while attempting to retrieve the current date using Date() in JavaScript. Initially, I changed the timezone to Cuba with the command: sudo ln -sf /usr/share/zoneinfo/Cuba /etc/localtime Subsequently, I executed Date ...

javascriptnode.jsdatetimezone

nested dropdowns in Bootstrap 4

I'm currently working on a nested dropdown menu feature. Although I have successfully implemented the functionality to display the next level, I am facing an issue where it does not close upon clicking. Check out my code here! Here is the JavaScript ...

javascriptbootstrap-4

Adding the same block of code to an event in Node.js: Best practices

My preferred tech stack for real-time user synchronization includes Node.Js with Express and Express HBS (Handlebars), as well as Socket.IO. For example, when creating a web chat application, I emit an event from the client to the server each time a user ...

javascriptnode.jsexpresstemplateshandlebars.js

Maintaining a consistent style input until it is modified

I'm currently dealing with this code (continuing from a previous question): input[type=submit]:focus { background-color: yellow; outline: none; } The issue I'm facing is that when I click anywhere else on the screen, the background color go ...

javascripthtmlcss

The Navbar design in Bootstrap is not scaling properly with the background image, making

I am currently in the process of developing a Bootstrap 5 webpage based on a provided design, but I am encountering some challenges. Here is the design I am working from: https://i.sstatic.net/MsFzq.jpg Here is my current progress: https://i.sstatic.ne ...

cssbootstrap-5