Concatenating html object arrays with javascript

javascript arrays html-object
user3718546 picture user3718546 · Jun 10, 2014 · Viewed 8.3k times · Source

I'm attempting to merge two arrays made up of html objects. For some reason using .concat() will not work for me.

Here's a simple pen to demonstrate the problem: http://codepen.io/anon/pen/kIeyB

Note: I tried searching for something remotely similar but found nothing that answered my question.

I figure you can do this the ole fashion way using for-loops but I rather not re-invent the wheel.

var x = document.getElementById("hello");
var items = x.getElementsByClassName("one");
//alert(items.length);
var items2 = x.getElementsByClassName("two");
//alert(items2.length);
items = items.concat(items2);
//alert(items.length);

Answer

jfriend00 picture jfriend00 · Jun 10, 2014

items and items2 are nodeList or HTMLCollection objects, not arrays. They do not contain a .concat() method. They have a .length property and support [x] indexing, but they do not have the other array methods.

A common workaround to copy them into an actual array is as follows:

// convert both to arrays so they have the full complement of Array methods
var array1 = Array.prototype.slice.call(x.getElementsByClassName("one"), 0);
var array2 = Array.prototype.slice.call(x.getElementsByClassName("two"), 0);

Related questions

How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More
For-each over an array in JavaScript

How can I loop through all the entries in an array using JavaScript? I thought it was something like this: forEach(instance in theArray) Where theArray is my array, but this seems to be incorrect.

Read More
Loop through an array in JavaScript

In Java you can use a for loop to traverse objects in an array as follows: String[] myStringArray = {"Hello", "World"}; for (String s : myStringArray) { // Do something } Can you do the same in JavaScript?

Read More