As t-j-crowder has noted, the OP’s code only creates one div. But, for googlers, there is one way to append multiple elements with a single appendChild in the DOM: by creating a documentFragment. function createDiv(text) { var div = document.createElement(“div”); div.appendChild(document.createTextNode(text)); return div; } var divs = [ createDiv(“foo”), createDiv(“bar”), createDiv(“baz”) ]; var docFrag = … Read more
You can do it with DocumentFragment. var documentFragment = document.createDocumentFragment(); documentFragment.appendChild(listItem); listItem.appendChild(listItemCheckbox); listItem.appendChild(listItemLabel); listItem.appendChild(editButton); listItem.appendChild(deleteButton); listElement.appendChild(documentFragment); DocumentFragments allow developers to place child elements onto an arbitrary node-like parent, allowing for node-like interactions without a true root node. Doing so allows developers to produce structure without doing so within the visible DOM
You can use: if (parentGuest.nextSibling) { parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling); } else { parentGuest.parentNode.appendChild(childGuest); } But as Pavel pointed out, the referenceElement can be null/undefined, and if so, insertBefore behaves just like appendChild. So the following is equivalent to the above: parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
The main difference is that appendChild is a DOM method and append is a jQuery method. The second one uses the first as you can see on jQuery source code append: function() { return this.domManip(arguments, true, function( elem ) { if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) { … Read more
// Create the element var script = document.createElement(“script”); // Add script content script.innerHTML = “…”; // Append document.head.appendChild(script); Or document.body.appendChild(script);