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

Question

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

我遍历了 javascript 可以在我的 html 页面中找到的所有 ID。每次 'id' startsWith 特定标签时，它都会进入我的 if 语句。

在这个 if 语句中，我创建了几个元素，例如 P、H1 和 HR。在我的 'html' 页面中，我有 3 个唯一的 ID，它们是 DIV，应该进入 if 语句。这很好用（左图[1]），直到...

我试图将两个以上的子元素附加到那些 DIV 元素。前两个 DIV 元素按预期扩展。最后一个还没有扩展。目前有两个以上的元素添加到父级，第 3 个 DIV (standardArticle3) 没有通过 if 语句。（右图[2]）

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

home.component.ts

var allElements = document.getElementsByTagName("*");
console.log(allElements);
for (var i = 0, n = allElements.length; i < n; ++i) {
  var el = allElements[i];
  var foundElementId = el.id;
  console.log(foundElementId);
  if (foundElementId.startsWith("standardArticle"))
  {
    var standardArticleElement = this.jsonReaderService.getStandardArticleContent(foundElementId.substring(15, foundElementId.length));

    var titleElement = document.createElement("h1");
    var titleText = document.createTextNode(standardArticleElement.title);
    titleElement.appendChild(titleText);

    var contentElement = document.createElement("p");
    contentElement.innerHTML = standardArticleElement.content;

    var thematicBreak = document.createElement("hr");
    thematicBreak.style.borderTopColor = "black";

    var thematicBreakTwo = document.createElement("hr");
    thematicBreakTwo.style.borderTopColor = "black";

    // Child elements are all being appended the right way, but the last DIV will never be extended
    el.appendChild(titleElement);
    el.appendChild(thematicBreak);
    el.appendChild(contentElement);
    el.appendChild(thematicBreakTwo);
  }
}

home.component.html

    // 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>

场景 1 和 2。

有人知道为什么会这样吗？

Answer 1

document.getElementsByTagName() returns 实时 HTML 集合，您的集合包括页面上的每个元素。这意味着当您附加新元素时，这些元素会包含在集合中，但是由于您迭代到集合的原始长度，您将错过集合的最后一个元素（元素数量与元素数量相同你添加了）。

似乎对您的问题更好的解决方案是将 class 添加到您要查找的所有元素，然后只获取带有 document.getElementsByClassName():

的元素

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

... 然后将您的 class 名称添加到您的 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 语句。

Answer 2

我想我知道你的问题是什么。让我们看看当您遍历页面上的所有元素时会发生什么：for (var i = 0, n = allElements.length; i < n; ++i)

如果页面上有 10 个元素，则 n 设置为 10。但是当您到达 if 语句并添加元素时，n 仍然等于10 但您现在在页面上有其他元素。看起来 Mikael Lennholm 说得更简洁并提供了一个很好的解决方案。

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

Appending more than two child elements to an element gives a strange behaviour

html

javascript

appendchild