Question

我创建4个div并在每个div中添加4个图像。

var divid = ["aa","bb","cc","dd"], 
    imgid = ["a.png","b.png","c.png","d.png"];
for(var i = 0; i < divid.length;i++ ){
   document.write('<div id="'+divid[i]+'" class="divCl"><input type="image" src="'+imgid[i]+'" class="imgCl"/></div>');
}

CSS： -

.divCl{
   /*display: none;*/
}
.imgCl{
   width: 100px;
   height: 100px;
}

为什么css不适用？还可以使用此方法来创建div并添加图像吗？

Answer 1

好吧，document.write会在文档加载后覆盖DOM的全部内容，所以你不应该使用它。您应该使用document.getElementById选择要插入图像的父元素，然后将该元素的.innerHTML设置为新图像。这是一个例子：

HTML

<div id="imgParent"></div>

JS

var divid = ["aa","bb","cc","dd"], 
    imgid = ["a.png","b.png","c.png","d.png"];
var imgs = '';

for(var i = 0; i < divid.length;i++ ){
   imgs += '<div id="'+divid[i]+'" class="divCl"><input type="image" src="'+imgid[i]+'" class="imgCl"/></div>';
}

var parent = document.getElementById('imgParent');
parent.innerHTML = imgs;

输出HTML

<div id="imgParent">
    <div id="aa">
        <input type="image" src="a.png" class="imgCl" />
    </div>
    <div id="bb>
        <input type="image" src="b.png" class="imgCl" />
    </div>
    ...
</div>

Answer 2

存在语法错误。您的数组元素不是字符串。 元素是未定义的变量。我使用jQuery将每个div附加到正文中。

var divid = ['aa','bb','cc','dd'], 
    imgid = ['a','b','c','d'];

for(var i = 0; i < divid.length; i++ ) {
   var str = $('<div id="'+ divid[i] +'" class="divCl"><input type="image" src="'+ imgid[i] +'" class="imgCl"/></div>');
   $('body').append(str);
}

https://jsfiddle.net/hjepjnk3/

Answer 3

使用document.write路由将导致您的CSS（以及其他所有内容）被覆盖。更好的方法是创建一个容器div并将新的div放在那里

var divid = ["aa","bb","cc","dd"], 
imgid = ["a.png","b.png","c.png","d.png"];

for(var i = 0; i < divid.length;i++ ){
    document.getElementById('containerDiv').innerHTML += '<div id="'+divid[i]+'" class="divCl"><input type="image" src="'+imgid[i]+'" class="imgCl"/></div>'
}

您也可以通过执行

将其直接添加到正文中

document.getElementsByTagName('body')[0].innerHTML

创建div并动态添加图像

3 个答案: