无法在'Node'上执行'appendChild'：参数1的类型不是'Node'。使用某些元素但不使用其他元素

Question

我正在创建一个脚本，该脚本使用访存来检索外部HTML，然后通过一些操作创建2个HTMLcollection，最后对其进行迭代以显示div，其中div具有第一个集合中的一个元素，而第二个集合中的一个元素。这是我写的一些代码：

<section id="to_take">
       <p>THE EUROPEAN PARLIAMENT AND THE COUNCIL OF THE EUROPEAN UNION,</p>
       <p>Having regard to the Treaty establishing the European Community, and in particular Article 175(1) thereof,</p>
       <p>Having regard to the proposal from the Commission,</p>
       <p>Having regard to the opinion of the European Economic and Social Committee <a href="#1" id="1back">(1)</a>,</p>
       <p>Having consulted the Committee of the Regions,</p>
       <p>Acting in accordance with the procedure laid down in Article 251 of the Treaty <a href="#2" id="2back">(2)</a>,</p>
       <p>Whereas:</p>
<ol> 
     <li>some li elements that I'm not posting because they are too much.</li>
</ol>
<p>another P element</p>
</section>

这是脚本采用的HTML代码，其他文档相同，但是使用另一种语言。

脚本是：

async function request(input_1, input_2){
        var left = await fetch(input_1);
        var right = await  fetch(input_2);
        var text_left = await left.text();
        var text_right = await right.text();
        var parser = new DOMParser();
        var part_1 = parser.parseFromString(text_left, "text/html");
        var parser_2 = new DOMParser();
        var part_2 = parser_2.parseFromString(text_right, "text/html");
        var collection_1 = part_1.getElementById("to_take").children;
        var collection_2 = part_2.getElementById("to_take").children;
        display_elements(collection_1, collection_2);

    }
        function display_elements(array_1, array_2){
        var article = document.getElementById("contenitore");
        var counter = 0;
        for (var i in array_1){
            var container = document.createElement("div");
            container.appendChild(array_1.item(counter));
            container.appendChild(array_2.item(counter));
            article.appendChild(container);
            counter++;
        }
    }

该脚本实际上可以很好地在右页部分中显示其必须具备的功能，但是它具有1种奇怪的行为和1个错误。首先：它从2个集合中获取第一个元素，然后脚本跳过第二个元素并转到第三个元素，然后再次，它获取1个元素并跳过下一个元素。第二：它给了我这个错误：无法在“节点”上执行“ appendChild”：参数1的类型不是“节点”。我试图修改某些元素，但是基本上我不明白为什么它不能以正确的方式工作。我尝试使用While代替for来更改集合上的方法，但我不理解该错误，因为它适用于某些元素，不适用于其他元素。

Answer 1

您的循环正在跳过元素，因为当您这样做时：

container.appendChild(array_1.item(counter))

...您
移动将该项目从array_1移到容器元素中。这意味着array_1中的所有后续项将从其当前索引位置移动到少一的位置（这是一个[[live集合）。但是，您增加了counter++，因此在那一刻，您将跳过一个永远不会访问的数组元素。
相反，根本不使用计数器，而只是使用array_1.item(0)，并循环直到array_1为空：while (array_1.length) {
    var container = document.createElement("div");
    container.appendChild(array_1.item(0));
    container.appendChild(array_2.item(0));
    article.appendChild(container);
}

只需意识到您确实清空了两个丢失子元素的“ to_take”元素。如果您不希望发生这种情况，那么请按原样保留您的代码，但请像对待appendChild：]那样

clone元素。
var counter = 0;
for (var i in array_1){
    var container = document.createElement("div");
    container.appendChild(array_1.item(counter).cloneNode(true));
    container.appendChild(array_2.item(counter).cloneNode(true));
    article.appendChild(container);
    counter++;
}
为了保护您的代码免于其中一个数组较短或某项为null的情况，请添加一些if条件：

var counter = 0;
for (var i in array_1){
    var container = document.createElement("div");
    if (array_1.item(counter)) 
        container.appendChild(array_1.item(counter).cloneNode(true));
    if (array_2.item(counter)) 
        container.appendChild(array_2.item(counter).cloneNode(true));
    article.appendChild(container);
    counter++;
}