如何使用JavaScript连接HTML元素的两个数组

Question

我已经尝试了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>​]

Answer 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”将具有所有元素。

Answer 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 。

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

Answer 3

这是一个代码片段，用于将元素添加到数组，然后将数组中的元素添加到元素。

如果这是您尝试使用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> 

Answer 4

首先看到left和right都没有在任何意义上的阵列。 您必须执行document.querySelectorAll或document.getElementsByClassName才能获取数组，然后可以应用数组之类的方法来将它们联接。 最优选使用：

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