在DOM更改时插入html元素
我的代码应该在所有具有预定义类名的div中插入HTML内容，而不使用jQuery，并且至少与IE8兼容(所以没有getElementsbyClass)。
html：
<div class="target">1</div>
<div class="target">2</div>
<div class="target">3</div>
<div class="target">4</div>javascript：
var elems = document.getElementsByTagName('*'), i;
for (wwi in elems) {
if((' ' + elems[wwi].className + ' ').indexOf(' ' + "target" + ' ') > -1) {
elems[wwi].innerHTML = "YES";
//elems[wwi].innerHTML = "<div>YES!</div>";
}
}你可以试试here。
正如您所看到的，在每个div中都打印了YES一词。如果您注释elems[wwi].innerHTML = "YES";并将其替换为elems[wwi].innerHTML = "<div>YES!</div>"，则代码将失败。我认为这是因为插入div元素会修改DOM，从而导致FOR循环失败。我说的对吗？
我可以通过在每次创建innerHTML时调用for循环来解决这个问题，并且当我插入代码时，可以添加一个类(如data-codeAlreadyInserted=1)来忽略下一次FOR在该div中传递时的情况。但同样，这是一个非常糟糕的解决方案，因为对于一个有许多标签的普通站点，我甚至可以冻结用户浏览器。
你认为如何？假设我不知道在每次innerHTML调用中插入的标签数量。
回答 3
Stack Overflow用户
发布于 2013-06-26 20:48:51
“我想是因为插入div元素会修改DOM，从而导致FOR循环失败。我说的对吗？”
差不多吧。您的elems列表是一个实时列表，它会在DOM更改时更新。因为您在每次迭代中都会添加一个新的div，所以列表会不断增长，因此您永远不会到达末尾。
为了避免这种情况，您可以进行反向迭代，
for (var i = elems.length-1; i > -1; i--) {
// your code
}或者将列表转换为数组。
var arr = [];
for (var i = 0, len = list.length; i < len; i++) {
arr.push(elems[i]);
}
for (i = 0; i < len; i++) {
// your code
}Stack Overflow用户
发布于 2013-06-26 20:48:43
您可以获取实时节点列表的副本：
var nodes = [];
for (var i = 0, n = elems.length; i < n; ++i) {
nodes.push(elems[i]);
}然后使用适当的for循环，而不是for ... in来迭代数组：
for (var i = 0, n = nodes.length; i < n; ++i) {
...
}for ... in只能在对象上使用，不能在数组上使用。
Stack Overflow用户
发布于 2013-06-26 20:51:51
另一种方法是使用replaceChild而不是innerHTML。它工作得更好，速度也更快：
var newEl = elem[wwi].cloneNode(false);
newEl.innerHTML = html;
elem[wwi].parentNode.replaceChild(newEl, elem[wwi]);https://stackoverflow.com/questions/17320438
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号