将 HTMLCollection 的内容附加到 Body

Question

我正在努力：

1. 将 HTML 字符串解析为 DOM 对象
2. 提取段落（本例中为 10 段）
3. 将提取的段落附加到正文

我有以下代码：

$(document).ready(function(){
    function _parse(html_str_or_obj)
    {
        var elem_obj, elem_dom_obj;

        //Convert to DOM element
        elem_obj = document.createElement("div");
        elem_obj.innerHTML = html_str_or_obj;
        elem_dom_obj = elem_obj.firstChild;

        return elem_dom_obj;
    }

    var html_str = '<div id="body-wrapper">\
      <div id="container-1">\
        <div id="container-1x"><div id="container-2x"><div id="container-3x"><p>First Paragraph</p></div></div></div>\
        <p>This is the first container - Line 1</p>\
        <p>This is the first container - Line 2</p>\
        <p>This is the first container - Line 3</p>\
      </div>\
      <div id="container-2">\
        <p>This is the second container - Line 1</p>\
        <p>This is the second container - Line 2</p>\
        <p>This is the second container - Line 3</p>\
        <p>This is the second container - Line 4</p>\
      </div>\
        <div id="container-3">\
        <p>This is the third container - Line 1</p>\
        <p>This is the third container - Line 2</p>\
      </div>\
    </div>';
    var elem_body_obj = document.body;
    var elem_obj = _parse(html_str);
    var elem_p_obj = elem_obj.getElementsByTagName('p');

    for(var i = 0; i < elem_p_obj.length; i++)
    {
        elem_body_obj.appendChild(elem_p_obj[i]);
    }
});

当我追加元素时，它就可以工作了。它不是 10 段，而是只附加 5 段。不知道发生了什么。

当我使用

console.log(elem_p_obj)

时，它会显示一个只有 5 个元素的 HTMLCollection。但是，当我从 for 循环中注释掉

elem_body_obj.appendChild(elem_p_obj[i]);

时，它会正常输出 10 个元素。

我想追加全部 10 段，但某处似乎有问题。

这是一个小提琴：http://jsfiddle.net/o3gutw2e/3/。

Answer 1

element.getElementsByTagName()

返回活动节点列表。这意味着将每个项目附加到正文后，您的列表正在缩小。

无需遍历列表，只需在第一个元素上继续调用

.appendChild()

，无论列表的原始大小有多长。

while (elem_p_obj.length > 0)
{
    elem_body_obj.appendChild(elem_p_obj[0]);
}

实时节点列表往往会在应用程序中引入许多意想不到的错误，因此我建议使用您的原始解决方案和

.querySelectorAll()

来代替。

var elem_p_obj = elem_obj.querySelectorAll('p');
for(var i = 0; i < elem_p_obj.length; i++)
{
    elem_body_obj.appendChild(elem_p_obj[i]);
}

Answer 2

由于我刚刚在使用实时列表时遇到问题，我也会提供我的解决方案。

使用 HTMLCollection 实时列表...

let elemToAppendto = document.getElementById('some-elem');

while (htmlCollection.firstChild instanceof HTMLElement) {
    elemToAppendto.appendChild(htmlCollection.firstChild);
}

或者如果您想避开实时列表...

let elemToAppendto = document.getElementById('some-elem');

let htmlCollectionArray = Array.from(htmlCollection)
for (const child of htmlCollectionArray) {
  elemToAppendto.append(child);
}