如何使用 JavaScript 连接两个 html 元素数组答案

【问题标题】：How to join two arrays of html elements with JavaScript如何使用 JavaScript 连接两个 html 元素数组
【发布时间】：2015-09-07 06:41:41
【问题描述】：

我已经尝试过 concat 和 push 方法，但对我没有用。这就是我想做的：

var left = document.getElementById('main-left').children;
var right = document.getElementById('main-right').children;
var main = left.concat(right); 

left = [<article class="content">…</article>, <article class="content">…     </article>, <article class="content">…</article>]
right = [<article class="content">…</article>, <article class="content">… </article>, <article class="content">…</article>]

【问题讨论】：

标签： javascript html arrays push concat

【解决方案1】：

getElementById() 永远不会返回一个数组，因此 push 和 concat 在“left”和“right”对象上不可用。你可以试试这样的：

    function logElementArray(){
    var leftArray = document.getElementById('left').children;
    var rightArray = document.getElementById('right').children;
    var mainArray=[];
    for(var i=0; i<rightArray.length; i++){
        mainArray.push(rightArray[i]);
    }
    for(var i=0; i<leftArray.length; i++){
        mainArray.push(leftArray[i]);
    }
 }

你的 'mainArray' 将拥有所有元素。

【讨论】：

【解决方案2】：

你确实应该使用 concat，但是像这样：

var left = document.getElementById('main-left').children;
var right = document.getElementById('main-right').children;

left = [].slice.call(left);
var main = left.concat.apply(left, right);

// or even var main = [].concat.apply([], [[].slice.call(left), [].slice.call(right)]);

left不是一个Array实例，所以它没有slice或concat这样的Array.prototype方法，所以需要使用call。

或者您当然可以简单地使用 for 循环并在循环中填充新数组。

【讨论】：

【解决方案3】：

这里是一个代码sn-p，用于将元素添加到数组中，然后将数组中的元素添加到元素中。

如果这是您尝试使用 appendChild() 做的事情可能会更好。

var a = document.getElementsByClassName("test");
var b = "";
for (var i = 0; i < a.length; i++) {
  b += a[i].outerHTML;
  console.log(a[i]);
}
var c = document.getElementById("main");
c.innerHTML = b;

.test {
  border: 5px solid cornflowerblue;
  height: 50px;
}
#main {
  border: 5px solid firebrick;
}

<div class="test"></div>
<div class="test"></div>
<div id="main"></div>

【讨论】：

【解决方案4】：

首先看到left 和right 在任何意义上都不是数组。您必须执行document.querySelectorAll 或document.getElementsByClassName 才能获得一个数组，然后您可以应用类似数组的方法来加入它们。最好使用：

// `a` into `b`:
for (var i=a.length-1; i >= 0; i--) {
     b.unshift( a[i] );
}

【讨论】：

如何获得NodeList 并不重要。一个 NodeList 它是一个 NodeList 而不是一个数组。