Javascript 将两个以上的子元素附加到一个元素会产生奇怪的行为

我有一种非常奇怪的行为，我不知道是什么原因造成的

我循环遍历javascript可以在html页面中找到的所有id。每次“id”以特定标签启动时，它都会进入我的if语句

在这个if语句中，我创建了几个元素，比如p、H1和HR。在我的“html”页面中，我有3个唯一的id，它们是DIV，应该放在if语句中。这很有效（图左[1]），直到

我试图将两个以上的子元素附加到那些DIV元素中。前两个DIV元素按预期进行了扩展。不过，最后一个还没有扩展。当有两个以上的元素添加到父级时，第三个DIV（standardArticle3）不会通过if语句。（右图[2]）

希望代码和场景图片能让这个故事更清晰：

home.component.ts

var-allegements=document.getElementsByTagName（“*”）；
控制台日志（等位基因）；
对于（var i=0，n=allElements.length；i

home.component.html

//其他内容
//其他内容
//其他内容

场景1和场景2。

---

有人知道为什么会发生这种情况吗？

document.getElementsByTagName（）

返回一个实时HTMLCollection，并且您的集合包含页面上的每个元素。这意味着，当您附加新元素时，这些元素将包含在集合中，但由于您迭代到集合的原始长度，因此将错过集合的最后元素（元素数与您添加的元素数相同）

对于您的问题，似乎更好的解决方案是向所有要查找的元素添加一个类，然后使用

document.getElementsByClassName（）

：

。。。然后将类名添加到HTML中：

// other content
<div id="standardArticle1" class="standard-article col-sm-6">
</div>
// other content
<div id="standardArticle2" class="standard-article col-sm-6 pull-right">
</div>
// other content
<div id="standardArticle3" class="standard-article col-sm-6">
</div>

//其他内容
//其他内容
//其他内容

---

使用这种方法，您也不需要您的

id.startsWith（“standardArticle”）

if

语句。

我想我知道您的问题所在。让我们看看当您循环页面上的所有元素时会发生什么：

for（var i=0，n=allegements.length；i

---

如果页面上有10个元素，则

n

设置为10。但是，当您到达

if

语句并添加元素时，

n

仍然等于10，但现在页面上还有其他元素。看起来Mikael Lennholm说得更简洁，提供了一个很好的解决方案。

或

document.queryselectoral（）

（返回的不是活动的集合）或（只要在当前元素的“下方”添加元素）使用实际长度

i

非常感谢！我发现“document.querySelectorAll（[id^=standardArticle]”；”你能帮我吗。它可以找到id以“standardArticle”开头的所有元素。是的，有很多方法可以解决这个问题，使用类只是最常用的方法。

    // other content
    <div id="standardArticle1" class="col-sm-6">
    </div>
    // other content
    <div id="standardArticle2" class="col-sm-6 pull-right">
    </div>
    // other content
    <div id="standardArticle3" class="col-sm-6">
    </div>

var allElements = document.getElementsByClassName("standard-article");

// other content
<div id="standardArticle1" class="standard-article col-sm-6">
</div>
// other content
<div id="standardArticle2" class="standard-article col-sm-6 pull-right">
</div>
// other content
<div id="standardArticle3" class="standard-article col-sm-6">
</div>