We Keep Coding

Insert an HTML icon within a Javascript new div

In this Django project, there is a Javascript function creating a new div in which we display some data.
for (var i = 0; i < files.length; i++) {
var newDiv = document.createElement('div');
newDiv.setAttribute("class","files_div");
//Call the helper function to check 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 need to add icons next to this data. For example, a pdf icon if it's a pdf file.
How do you add icons in Javascript once a new div is created?

Have you considered a css-based solution on this? You can add an icon to any element using pseudo elements. This adds another element next to .pdf which you can style to fit your purpose. Using background-image allows you to add 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>

wrong link, wrong place

ok so I'm trying to display news articles from an api. what I've written in javascript does just that (article photo, title, author, etc) except for the links to each particular article. at first they werent clickable at all, then I changed the css with something I found here. that made the whole entire page clickable and only applies to one link, and one link only. so what I need to know is how to make sure the clicks happen in the right place and go to the right location? please and thank you.
function GenerateArticle(data) {
const Article = document.getElementById("ArticleGrid")
for (let i = 0; i < data.length; i++) {
const Div = document.createElement("Article");
Div.innerHTML =
`<img src = ${data[i].urlToImage}>
<h5>${data[i].title}</h5>
<p>${data[i].publishedAt}</p>
<p>${data[i].description}</p>
<p>${data[i].content}</p>
<p>${data[i].source.name}</p>
<p>${data[i].author}</p>
<a href = '${data[i].url}'></a>`;
Article.appendChild(Div);
}
}
a {
position: fixed;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
}

What you're trying to achieve is a stretched link, an anchor that has no actual content but spans the entire contents of it's parent node. Only, you're not quite there. A few ways to do this but let's simplify for demonstration.
Set the position style property on the Div to relative.
const Div = document.createElement("article");
Div.style.position = "relative";
Absolute position your link in place of fixed.
a {
position: absolute;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
}

HTML/CSS/Javascript delete button

I have a list of items inside a div that is determined by the contents of two arrays.
product_codes=[code1, code2, code3];
quantities=[1, 34, 67,];
Every time a new code and quantity is added to its respective array, I have a javascript function that does this:
document.getElementById('cart_body').innerHTML='';
cart_text='';
elf='<br class="none"/>';
for(i=0; i<product_codes.length; i++){
cart_text+=(product_codes[i]+" (x"+quantities[i]+")"+elf);
}
document.getElementById('cart_body').innerHTML=cart_text;
and acts upon This HTML:
<div id='cart_body'></div>
with this CSS:
.none{margin-top: 0px;}
(the CSS simply overrides another styling I gave to ALL tags)
What I want to do, is at the end of each line added to cart_text (before the inserted line break), is to add a small circular button with an x in the center (I imagine that there's something like that in Bootstrap, but I am unable to use it or any other libraries) that when clicked, deletes the text next to it ON THAT LINE ONLY (the product code and quantity) from the div, AND deletes the two items(product code and quantity) from their respective arrays. Ideally, the aforementioned delete button would look something like the button that lets you delete a your comment that you've posted(here on Stack Overflow).
Please only Vanilla CSS and Javascript answers only. No libraries, please.
If it's not too much to ask, a working JsFiddle would be great too.
Thanks!
Edit
Attempt at the button: #1
#close_button{
border: 1px solid black;
padding-top: 0;
max-width: 15px;
max-height: 15px;
background-color: lightBlue;
border-radius: 90px;
font-size: 14px;
text-align: center;
}
<div id='close_button'>x</div>
This does not work because I cannot get a proper size with the x in the exact center of the circle. I tried padding, all that good stuff, but to no avail.

You can use the following code at https://jsfiddle.net/osha90/krrhvdmj/
<div id='cart_body'>
<p>
code1 x1 <span style="display:inline-block;width:30;height:30;background-color:#d2d2d2; border-radius: 50%;font-size:12px;line-height:18px;">X</span>
</p>
var product_codes=["code1", "code2", "code3"];
var quantities=[1, 34, 67,];
document.getElementById('cart_body').innerHTML='';
for(i=0; i<product_codes.length; i++){
var p = document.createElement("p");
p.appendChild(document.createTextNode(product_codes[i] +" X "+quantities[i]));
var span = document.createElement("span");
span.appendChild(document.createTextNode("X"));
span.classList.add("delete");
var a = document.createAttribute("data-productCode");
a.value = product_codes[i];
span.setAttributeNode(a);
p.appendChild(span);
span.addEventListener("click",removeElm);
document.getElementById('cart_body').appendChild(p);
}
function removeElm(){
var div = this.parentNode.parentNode;
for(i=0; i<product_codes.length; i++){
if(product_codes[i] == this.getAttribute("data-productCode"))
{product_codes.splice(i,1);
quantities.splice(i,1);
console.log(product_codes);
console.log(quantities);
break;
}
}
div.removeChild(this.parentNode);
}
css Code
.delete{
display: inline-block;
width: 19px;
height: 18px;
text-align: center;
background-color: #D2D2D2;
border-radius: 50%;
font-size: 12px;
line-height: 18px;
cursor: pointer;
}

Merging multiple canvas in a single DIV together - JQuery

I have a method that creates different layers of canvas within single divs based on data. Sometimes a div will contain more than one canvas within it. These canvas contain an image which is usually a PNG. What I am trying to do is take every canvas within a single div and render as one single canvas so that every div would contain combined canvases if they had more than one within it.
Here is what I am doing:
// Loop through each div that contains canvas and combine them
$(".ifp_container_printing").each(function(index, element) {
var primaryCanvas = $(this).closest('canvas');
var thisOne = $(this);
thisOne.find('canvas').each(function(index, element) {//<!-- grab the canvas for this parent div
var childCanvas = $(this).get();
childCanvas = childCanvas.getContext("2d");
primaryCanvas.drawImage(childCanvas, 0, 0);
});
});
The issue here is when I get to the childCanvas.getCo... it tells me its undefined.
Suggestions or thoughts?
UPDATE:
Here is the example of the div layout I would be grabbing from:
<div class="ifp_container_printing ifp_container_printing_15" style="width:100%;" id="ifp_container_printing_15">
<div class="kineticjs-content" role="presentation" style="position: relative; display: inline-block; width: 1665px; height: 1871px;">
<canvas width="3330" height="3742" style="padding: 0px; margin: 0px; border: 0px; position: absolute; top: 0px; left: 0px; width: 1665px; height: 1871px; background: transparent;"></canvas>
<canvas width="3330" height="3742" style="padding: 0px; margin: 0px; border: 0px; position: absolute; top: 0px; left: 0px; width: 1665px; height: 1871px; background: transparent;"></canvas>
</div>
</div>

Your problem is the wrong usage of closest method. It traverses up to the tree, check the API.
You may rewrite your code like this. This code will draw all canvases in a div on the first canvas in that div.
$(".ifp_container_printing").each(function() {
var allCanvases = $(this).find('canvas');
var primaryCanvas = allCanvases[0];
var primaryContext = primaryCanvas.getContext('2d');
for (var i = 1, len = allCanvases.length; i < len; i++) {
// iterate through all canvases except the first
primaryContext.drawImage(allCanvases[i], 0, 0);
}
});

I want to click all div boxes on a website using javascript

Is it possible to click all div boxes on a website using javascript?
here's the css of the div box:
.bird {
float: left;
position: absolute;
margin-top: 0;
margin-left: 0;
margin-right: 0;
top: auto;
left: auto;
right: auto;
bottom: auto;
z-index: 200;
text-align: center;
display: block;
}
and this is the javascript i want to use:
var myLinks = document.getElementsByClass("bird");
for (var i = 0; i < myLinks.length; i++) {
myLinks[i].click();
}

There is no getElementsByClass. There's a getElementsByClassName but it's not supported in IE8 and earlier.
You can use document.querySelectorAll(".bird") (which is supported by all modern browsers including IE8 and above) to get your list on IE8 and above and any other modern browser:
var myLinks = document.querySelectorAll(".bird");
Then your code for looping through the resulting NodeList is fine. Note that calling click on the element may not completely simulate a click (not least because there's no mouse position information given). To go further in your event simulation, you can use createEvent (for most browsers).

Why don't you try it with jquery? Like this:
$('.bird').each(function(){
$(this).click();
});