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
appendChild will remove the node from wherever it is before appending it to its new location, so you need to make copies of the node instead. You can use cloneNode for that. The true makes cloneNode perform a deep clone, i.e. with all its child nodes. for(var i = 0; i < urls.length; i++){ sliderBody.appendChild(slide.cloneNode(true)); … Read more
You are appending the same element over and over. You need to call document.createElement each time you wish to have a new element. EDIT: If the element setup is really complicated and potentially includes children then you can also use Node.cloneNode
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);
Some notes: Using innerHTML is faster in IE, but slower in chrome + firefox. Here’s one benchmark showing this with a constantly varying set of <div>s + <p>s; here’s a benchmark showing this for a constant, simple <table>. On the other hand, the DOM methods are the traditional standard — innerHTML is standardized in HTML5 … 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);