Javascript Code to Combine/Merge/Concat HTML Arrays

Javascript Code to Combine or Merge 2 or more HTML Arrays Together into Single HTML Array. We Cant Directly use Normal JS Array Combiners like .push() Because HTML Arrays are not Really Arrays as far as Javascript is Concerned

For example lets say we have 2 html arrays we want to join or combine or concat, ie

let arrDivs = document.querySelectorAll("div"); let arrSpans = document.querySelectorAll("span");

The problem is we can't use regular JavaScript methods to join these to arrays because they are not true arrays, at least as for as JS is concerned. So we can't use .push() to add elements to the HTML array or .concat() to combine these 2 non arrays.

There are 2 possible solutions that allow you to comine 2 or more html arrays without any JavaScript errors or issues:

let arrAll = [...arrDivs, ...arrSpans];

OR first convert the html arrays into regular arrays and then you can use array joining/merging/concatting methods to combine 2 or more arrays.

let arrDivs = document.querySelectorAll("p"); let arrSpans = document.querySelectorAll("h2"); let arrAll = Array.from(arrDivs).concat(Array.from(arrSpans));

I prefer the first method because then you can continue to work with the elements contained in the HTML array as html elements without having to worry about possible coding clashes as some point.