Javascript 将HTMLCollection的内容追加到正文

我正在努力：

将HTML字符串解析为DOM对象

摘录段落（本例中有10段）

将提取的段落附加到正文

我有以下代码：

$(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]);
    }
});

$（文档）.ready（函数（）{
函数解析（html、str或obj）
{
变量elem_obj，elem_dom_obj；
//转换为DOM元素
elem_obj=document.createElement（“div”）；
elem_obj.innerHTML=html_str_或_obj；
elem_dom_obj=elem_obj.第一个孩子；
返回elem_dom_obj；
}
var html_str='1〕\
\
第一段
\
这是第一条集装箱线1
\
这是第一条集装箱航线2
\
这是第一条集装箱航线3
\
\
\
这是第二个集装箱线1
\
这是第二条集装箱航线2
\
这是第二个集装箱3号线
\
这是第二个集装箱线4
\
\
\
这是第三个集装箱线1
\
这是第三条集装箱航线2
\
\
';
var elem_body_obj=document.body；
变量elem_obj=_parse（html_str）；
var elem_p_obj=elem_obj.getElementsByTagName（'p'）；
对于（变量i=0；i

它一直工作到我添加元素的时候。它没有10段，只增加了5段。不知道发生了什么事

当我使用

console.log（elem\u p\u obj）

时，它显示了一个只有5个元素的HTMLCollection。然而，当我注释掉

elem_body_obj.appendChild（elem_p_obj[I]）从for循环中，它正常输出10个元素

我想把所有的10段都加上去，但似乎有些地方出了问题

这里有一个提琴：。
元素。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]);
}

var elem_p_obj=elem_obj.querySelectorAll（'p'）；
对于（变量i=0；i
非常感谢。我还将研究如何使用querySelectorAll进行此类操作。干杯