Question

我想：

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

当我附加元素时，它可以工作。而不是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]);
}

将HTMLCollection的内容附加到Body

1 个答案: