Question

我想使用纯Java脚本将具有类名的图像添加到我的div中。我怎样才能做到这一点？这是我的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

如果要添加具有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，看看是否有帮助。

Answer 3

你可以试试这个

＆＃13;

  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
    }

＆＃13;

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

＆＃13;

通过JS添加元素及其类名

3 个答案: