We Keep Coding

Write a <img> element inside of a <li> element with Javascript

I've been working with Javascript for a little bit now. My code below has various pictures defined as an object. Now I want to put these images as <img> inside <li> tags. However, I am experiencing some difficulty with this.
for (var i = 0; i < pictures.length; i++){
var newImage = document.createElement('img')
newImage.setAttribute('class', 'image-item')
newImage.setAttribute('alt', pictures[i].name)
newImage.src = pictures[i].url
var liItem = document.createElement('li')
liItem.innerHTML = newImage
document.getElementById('pictures').appendChild(liItem)
console.log(liItem)
}
Any idea on how to resolve this? The result has to look like this:
<li><img src="picture1.jpg" alt="loremipsum"></li>
Right now console tells me the following:

Change liItem.innerHTML = newImage to liItem.appendChild(newImage)

The innerHTML property sets or returns the HTML content (inner HTML) of an element. so you should change liItem.innerHTML = newImage to liItem.appendChild(newImage)

Background-image style attribute in JavaScript

I'm trying to apply a background image using a style tag on a div that's reference in JavaScript. I'm sure it's something to do with the quotations around the image variables. Any help would be greatly appreciated.
function appendData () {
var image = "http://domain.com/image.jpg";
var html = '<div class="itemImage" style="background-image:url(' + image + ');"></div>';
$('.container').append(html);
}

I would consider changing your approach slightly. Sure, you can append the html to your container OR you could change the property of the itemImage without re-writing it every time.
If you build the itemImage div into that container you could do this instead
function appendData () {
var image = "http://domain.com/image.jpg";
$(".itemImage").css("background-image", image);
}

function appendData () {
var image = "http://domain.com/image.jpg";
var html = '<div class="itemImage" style="background-image:url(\'' + image + '\');"></div>';
$('.container').append(html);
}

HTML elements created by the content script are not accessible by the content script

Within content script I use on.Message.addListener to add images with a class name to the currently active web page.
chrome.extension.onMessage.addListener(function (message, sender, sendResponse) {
// Selecting HTML tags
var divs = document.getElementsByTagName("div");
// Creating a full URL to use icon1
var imageUrl = chrome.extension.getURL("icons/icon1.png");
// Function to create an image
function PlaceImage(source_x, source_y, imageUrl) {
var newImage = document.createElement("img");
newImage.src = imageUrl;
newImage.style.position = "absolute";
newImage.style.left = source_x + 'px';
newImage.style.top = source_y + 'px';
// Assigning a class name
newImage.className = "label-key";
// Add an element to the HTML document
document.body.appendChild(newImage);
}
// Divs
for(var j=0; j<divs.length; j++) {
// Get the position of an element with getBoundingClientRect
var position = divs[j].getBoundingClientRect();
var x = position.left;
var y = position.top;
y -=32;
// Create comment image
PlaceImage(x, y, imageUrl);
}
});
Later I try to write to console by clicking on one of just created images by:
$(".label-key").click(function () {
console.log("hello");
});
There is no reaction of the browser.
I tried to write to console by accessing some class element with a different name, which was part of the original web page(received from the server). It worked fine.
More over I created another element within content script, but this time outside of onMessage.AddListener:
var newDiv = document.createElement("div");
document.body.appendChild(newDiv);
newDiv.style.width = "100px";
newDiv.style.height = "100px";
newDiv.style.backgroundColor = "red";
newDiv.className = "label-key";
It also worked fine. jQuery was able to access this element.
Therefore, I think there is something wrong with html elements created by the onMessage.addListener part of content script.
For additional reference: when I right-click on the newly created element "Inspect element" - I can see that the element is part of the html document. However, if I click "View page source" the element is not there.

Well, you are creating a new element of the class label-key, but the click handler assignment does not automagically extend to newly-created elements.
$(".label-key").click(...) is not behaving like a CSS rule despite looking like one: it collects all elements that match at the time of invocation and binds a listener for them.
So, if you add more images later, you need to add a click handler again:
function PlaceImage(source_x, source_y, imageUrl) {
var newImage = document.createElement("img");
newImage.src = imageUrl;
newImage.style.position = "absolute";
newImage.style.left = source_x + 'px';
newImage.style.top = source_y + 'px';
// Assigning a class name
newImage.className = "label-key";
newImage.click(function () {
console.log("hello");
});
// Add an element to the HTML document
document.body.appendChild(newImage);
}

Replace instead of append based on user input?

This function currently works for appending an img in a div. But I need a replace method instead of multiple img divs stacking on top of each other.
I'm open to solutions in jQuery as well.
function getImg(){
var url=document.getElementById('txt').value;
var div=document.createElement('div');
var img=document.createElement('img');
img.className="img-responsive";
img.src=url;
div.appendChild(img);
document.getElementById('gif-btn').innerHTML=""; <!-- Correct answer -->
document.getElementById('gif-btn').appendChild(div);
return false;
}
Thanks in advance for any and all help. Much appreciated!

Before you append, you can clear out the div, then append the new one
function getImg(){
var url=document.getElementById('txt').value;
var div=document.createElement('div');
var img=document.createElement('img');
img.className="img-responsive";
img.src=url;
div.appendChild(img);
document.getElementById('gif-btn').innerHTML = ""; // <-- Clears the gif-btn div
document.getElementById('gif-btn').appendChild(div);
return false;
}

Using jQuery
var url = $("#txt").val();
var image = $("<img>").attr("src", url).addClass("img-responsive");
var container = $("<div></div>");
// add the image to the <div> container
container.append(image);
// set the contents of gif-btn
$("#gif-btn").html(container);
... or better yet, you could do a simple fade-out, fade-in...
// replace the last line with this
$("#gif-btn").fadeOut("fast", function() {
$("#gif-btn").html(container); $("#gif-btn").fadeIn();
});

Create tag element dynamically and apply styles

I have created "myCanvas" div element dynamically and try to set styles to the div tag it throw the undefined exception. Please check my code and suggest me
// move the canvas, so it's contained by the same parent as the image
var imgParent = img.parentNode;
$('<div id="myCanvas">');
var can = $('myCanvas');
can.appendTo(imgParent);
// position it over the image
can.style.left = x + 'px'; //If set styles to can element, it's styles is undefined
What i did wrong here.. ? please anyone suggest me a right things..
Thanks,
Bharathi

Make is simple:
$('<div id="myCanvas">').appendTo(img.parentNode).css('left', x);

You don't need to select the myCanvas element because it hasn't been added to the DOM just yet (your selector wasn't right either). You can use this instead:
var imgParent = img.parentNode;
// By default when creating an element in jQuery, it returns an instance of the jQuery object created
var can = $('<div id="myCanvas">');
can.appendTo(imgParent);
can.style.left = x + 'px';

Replace
var can = $('myCanvas');
with
var can = $('#myCanvas');
[edit user="dholakiyaankit"]
QA asking for id not class

Antegias response should read
Replace ... with :
var can = $('#myCanvas');
as you have given it an id not a class, you cant select it in this way till its added to DOM, but you have a reference to it anyway in the variable can