如何使用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] );
}