Append multiple children to a node at once This my attempt at an answer for a question over on SO: Append multiple items in JavaScript

I'd like to know if I've made any mistakes as far as writing idiomatic ES6 JavaScript (mainly regarding convention and performance).

While satisfying, I'm pretty sure adding this behavior directly to Node.prototype is probably the wrong approach. I'm also concerned that maybe it should handle other inputs (like a NodeList?) and not just arrays as a single argument.

Node.prototype.appendChildren = function() {
  let children = [...arguments];

  if (
    children.length == 1 &amp;&amp;
    Object.prototype.toString.call(children[0]) === "[object Array]"
  ) {
    children = children[0];
  }

  const documentFragment = document.createDocumentFragment();
  children.forEach(c =&gt; documentFragment.appendChild(c));
  this.appendChild(documentFragment);
};

foo.appendChildren(bar1, bar2, bar3);
foo.appendChildren([bar1, bar2, bar3]);
First the code

Some changes to improve the function.


Node.prototype.appendChildren = function() {
  let children = [...arguments];  // old school



ES6 way

 Node.prototype.appendChildren = function(...children) {


The following is too complicated


  if (
    children.length == 1 &amp;&amp;
    Object.prototype.toString.call(children[0]) === "[object Array]"
  ) {
    children = children[0];
  }



To check for an array

if(Array.isArray(children[0])){...


But you are better of doing that in the loop, then you can handle arrays of arrays


  const documentFragment = document.createDocumentFragment();
  children.forEach(c =&gt; documentFragment.appendChild(c));



becomes 

  const documentFragment = document.createDocumentFragment();
  children.forEach(child =&gt; {
      if (Array.isArray(child)) {
          child.forEach(child =&gt; documentFragment.appendChild(child))
      } else {
          documentFragment.appendChild(child);
      }
  });
  this.appendChild(documentFragment);


  // will handle 
  foo.appendChildren(bar, [bar1, bar2, bar3]);


The design.

There are some that will argue that adding to a built in prototype is inviting disaster, others will argue its a great way to extend the functionality of the API.

As I see it there are two types of environments. 


You share the page with a variety of 3rd party scripts, adverts and what not.
The page is yours alone and no other code, but yours, will ever see that page.


Case 1

For case 1 you should avoid adding to the prototype, as you can not trust it. Someone else may have already added that name to the prototype and you clobber their code, or they may run after you and they clobber yours.

If you must do it, first check

if(typeof Node.prototype.appendChildren === "undefined"){

}else{
     // someone already has added something with that name
}


And if you add it lock it so it can not be over written

Object.defineProperty(Node.prototype, 'appendChildren ', {
     writable : false,    // dont let them over write it
     enumerable : true,   // dont hide it
     configurable : false,   // dont let them change the config so that they 
                             // can over write it
     value : function(...children) {... the rest of the function 
}); 


That with the other check ensures you don't step on toes, and your code is safe as well. Though what to do if that function is already taken is an issue that is best solved by not adding to the prototype and just creating a function

function appendChildrenToNode(node, ...children){
  const documentFragment = document.createDocumentFragment();
  children.forEach(child =&gt; {
      if (Array.isArray(child)) {
          child.forEach(child =&gt; documentFragment.appendChild(child))
      } else {
          documentFragment.appendChild(child);
      }
  });
  node.appendChild(documentFragment);
}


Case 2

For case 2. Do what you want its safe, but be sure you dont forget about it and use it on a public page. In other words do the first case setup to be safe.