Question

我查看了与.appendChild()和.innerHTML不同的内容，但使用了Image()个JavaScript对象。

我有10个变量img[1,2,3,4...10]，用JavaScript（new Image()）创建来预加载，没关系，现在我想将它只插入我的div中。

innerHTML返回HTMLImageObject之类的内容，appendChild()将无法正常工作。

到目前为止我的解决方案是：

document.getElementById("teste").removeChild(document.getElementById("teste").firstChild);
document.getElementById("teste").appendChild(img1);

有人有更好的想法吗？

Answer 1

你的方式非常可靠，但也许这样更容易阅读..而且lastChild具有边际性能优势

var ele = document.getElementById('teste');

while(ele.lastChild) { 
    ele.removeChild(ele.lastChild)
}

ele.appendChild(img1);

你也可以在某个地方保留对元素的引用

var ele = document.getElementById('teste'), img = ele.lastChild;

ele.removeChild(img);
ele.append(img1);

如果你有jQuery可用，你可以使用

$('#teste').clear().append(img1);

取决于您正在使用的浏览器，您甚至可以访问HTML5 Selector API，即使没有可以替代document.element方法的jquery

document.querySelector('#tests').first();

Answer 2

如果您不希望appendChild使用replaceChild。例如：

div.replaceChild(imgs[i], div.firstChild);