problems with appendChild <LI> and having Images match <LI> element

Question

I would like to have 3 li elements and in those li elements I want 1 image.

All the images go into the first li element instead of being spread out.

Any suggestion would be greatly appreciated...

I have tried this but it does not work..

/////////////CODE///////////////////

var node = document.createElement("LI");

node.innerHTML =
    "<ul class= rsox style=list-style-type: none>" +
    "<li class=images id=imageList>" +
    "</li>" +
    "</ul>";


document.getElementById('sele').appendChild(node);

var image = { image1.jpg, image2.jpg, image3.jpg };

   for (i = 0; i < image.length; i++) {

    container = document.getElementById ("imageList");



container.innerHTML += "<img class= imageClass src=https://www.WEB-SITE-NAME.com/" + image[i] + ">"
   }

Answer 1

Your code is really not clean and I think I know what you want to achieve, so here's my try in fixing your code:

var images = ["image1.jpg", "image2.jpg", "image3.jpg"];

var node = document.createElement("li"};

node.className = "rsox" ;
node.style.listStyleType = "none";

for (var i = 0; i < images.length; i++) {
  var listItem = document.createElement("li");
  listItem.className = "images";
  var img = document.createElement("img");
  img.className = "imageClass";
  img.alt = "";
  img.src = "https://www.WEB-SITE-NAME.com/" + images[i];
  listItem.appendChild(img);
  node.appendChild(listItem);
}

document.getElementById("sele").appendChild(node);

I haven't tested this, so if you get any errors or something, tell me.