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

Question

I`v already tried concat and push methods but it did not worked to me. Thats what i want to do :

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() never returns an array, so push and concat won't be available on 'left' and 'right' objects. you can try something like this:

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

Your 'mainArray' will have all the elements then.

Answer 2

You indeed should use concat, but like this:

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 is not an Array instance, so it doesn't have Array.prototype methods like slice or concat , so you need to use call .

Or you could of course simple use for loop and populate new array in loop.

Answer 3

Here is a code snippet for adding elements to an array and then adding the elements in the array to an element.

If this is what your trying to do using appendChild() is probably better.

 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

First see that left and right are not arrays in any sense. You have to perform document.querySelectorAll or document.getElementsByClassName to get an array and then you can apply array like methods to join them. Most preferably use:

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