Is it possible to append an element to a JavaScript nodeList?

Question

I\'m generating content dynamically, so I\'m often ending up with documentFragments which I\'m querying using querySelectorAll or querySelector

Answer 1

I have another suggestion. You can select multiple nodes by query seperator(,):

var nodes = document.querySelectorAll('h2, h3');

This code selects all h2 and h3 saved in nodes.

Answer 2

To not get into technicalities with array methods it can sometimes be more readable to make a list of node names and loop over the list.

In this example I assign the same event handler to all buttons in two different radio button groups (where each button in the group has the same name):

<div>
    <input type="radio" name="acmode" value="1" checked="checked">Phase<br>
    <input type="radio" name="acmode" value="2">Ssr<br>
    <input type="radio" name="acmode" value="3">Relay<br>
</div>
<div>
    <input type="radio" name="powermode" value="0"  checked="checked">Manual<br>
    <input type="radio" name="powermode" value="1">Automatic<br>
</div> 

Sample event handler:

var evtRbtnHandler =
    function rbtnHandler() {
        document.getElementById("response11").innerHTML = this.name + ": " + this.value;
    }

And assigning:

var buttongroup = ["acmode", "powermode"];
buttongroup.forEach(function (name) {
    document.getElementsByName(name).forEach(function (elem) {
        elem.onclick = evtRbtnHandler;
    });
});

In any case once you get your hands on each single item it can be pushed() to an array using human readable code.

Answer 3

EDIT: As @Sniffer mentioned, NodeLists are read-only (both the length property and the items). You can manipulate everything else about them, like shown below, but it's probably better to convert them to arrays instead if you want to manipulate them.

var list = document.querySelectorAll('div');
var spans = document.querySelectorAll('span');

push(list, spans);
forEach(list, console.log); // all divs and spans on the page

function push(list, items) {  
  Array.prototype.push.apply(list, items);
  list.length_ = list.length;
  list.length_ += items.length;
}

function forEach(list, callback) {
  for (var i=0; i<list.length_; i++) {
    callback(list[i]);
  }
}

It would probably be a better idea to turn the NodeList to an array instead (list = Array.prototype.slice(list)).

var list = Array.prototype.slice.call(document.querySelectorAll('div'));
var spans = Array.prototype.slice.call(document.querySelectorAll('span'));

list.push.apply(list, spans);
console.log(list); // array with all divs and spans on page

Answer 4

Unlike previously described element selection methods, the NodeList returned by querySelectorAll()is not live: it holds the elements that match the selector at the time the method was invoked, but it does not update as the document changes. ^[1]

The NodeList in this case is not alive, so if you add/remove anything to/from it, then it won't have any effect on the document structure.

A NodeList is a read-only array-like object. ^[1]

^{[1]: JavaScript: The Definitive Guid, David Flanagan}

Answer 5

Use ES6 Set():

var elems = new Set([
    ...document.querySelectorAll(query1),
    ...document.querySelectorAll(query2)
]);