Добавление элемента и его имя класса через JS

Question

Я хочу добавить изображение с именем класса в свой div, используя чистый Java Script. Как я могу это сделать? Вот мой код JS.

function show(){ 
    var y = document.getElementById("gallery1"); 
    y.innerHTML="<img src='css/images1/img/img4.jpg'/>" 
} 

Answer 1

function show(){ 
    var y = document.getElementById("gallery1");  
     y.innerHTML= y.innerHTML + "<img src='css/images1/img/img4.jpg' class='specifyclassnamehere'/>"; 
} 

Надеется, что вы пытаетесь добавить изображение. Поэтому вы должны добавить его во внутренний HTML.

Другой вариант:

function show(){ 
    var y = document.getElementById("gallery1"), 
     image = document.createElement("img"); 
     image.src= "css/images1/img/img4.jpg"; 
     image.setAttribute("class","specifyclassnamehere"); 
     y.appendChild(image); 
} 

DEMO

Answer 2

Вы можете попробовать это

function show(){ 
 
     var y = document.getElementById("gallery1"), 
 
      tempDiv = document.createElement("div"), 
 
      image = document.createElement("image"); 
 
     console.log(y); 
 
     image.setAttribute('src',"https://www.google.fr/images/srpr/logo11w.png"); 
 
     image.setAttribute("class","myclass"); 
 
     
 
     tempDiv.appendChild(image); 
 
     console.log(tempDiv); 
 
     y.innerHTML=tempDiv.innerHTML 
 
    }

<div id="gallery1"></div> 
 

 
<a href="" onClick="show(); return false">Click me</a>

Answer 3

Если вы хотите объявление d изображение с атрибутом class, вы можете создать элемент изображения и добавить его в свой div (или родительский элемент):

function show(){ 
    var y = document.getElementById("gallery1"); 

    var image = new Image(); 
    image.src = "css/images1/img/img4.jpg"; 
    image.setAttribute("class","myclass"); 

    y.appendChild(image); 
} 

Или даже включать непосредственно в img тег, например:

<img class="myclass" src='css/images1/img/img4.jpg'/> 

Вот Fiddle, см., Если это поможет.