Question

您好可以将div标签更改为图片标签吗？

我尝试使用此

var testDivTags= document.getElementsByClassName('div_tags');
var testImgTag= document.createElement("img");

for (var i = 0; i < testDivTags.length; ++i) {
    testDivTags[i].parentNode.replaceChild(testImgTag, testDivTags[i])      
}

但它不起作用。有什么想法吗？

Answer 1

问题是元素不能同时位于DOM的不同位置。

相反，你应该clone元素，然后插入克隆：

parent.replaceChild(newChild.cloneNode(), oldChild)

此外，还有另一个问题：HTMLCollection返回的getElementsByClassName是实时的。因此，当您替换元素时，它们会从列表中消失，并将后续元素重新编制为较低的索引。要解决这个问题，你可以

向后迭代实时HTMLCollection集合：

var liveC = document.getElementsByClassName('div_tags');
for (var i = liveC.length-1; i >= 0; --i)
    liveC[i].parentNode.replaceChild(testImgTag.cloneNode(), liveC[i]);

将其转换为数组：

var array = [].slice.call(document.getElementsByClassName('div_tags'));
for (var i = 0; i < array.length; ++i)
    array[i].parentNode.replaceChild(testImgTag.cloneNode(), array[i]);

使用querySelectorAll，它会返回一个静态NodeList集合：

var staticC = document.querySelectorAll('.div_tags');
for (var i = 0; i < staticC.length; ++i)
    staticC[i].parentNode.replaceChild(testImgTag.cloneNode(), staticC[i]);

<div>标记为<img/>标记Javascript

1 个答案: