jQuery's append() method can add a DOM element or a HTML string into a given DOM element, and makes things quite easy. But the same can be done with vanilla Javascript also.
Appending an Element with appendChild
The appendChild method requires 2 DOM elements :
- The DOM element into which appending is done.
- The DOM element which is to be appended
// The element into which appending will be done
var element = document.querySelector("#main-container");
// The element to be appended
var child = document.createElement("DIV");
child.innerHTML = 'Child Container';
// append
element.appendChild(child);
There are 2 things to note while using the appendChild method :
- Only a valid DOM element can be appended, and not a HTML string.
- Only one DOM node can be appended at one time. Appending multiple DOM nodes will require multiple calls to the method.
Appending HTML Strings with insertAdjacentHTML
Creating a DOM element with document.createElement is sometimes painful — create element, add attributes if required, add id and classes if required and so on. Moreover if the appended DOM element had child elements of its own then the process has to be repeated for every element.
It would have been better if appending could be done in a fashion like innerHTML — just write the HTML string, and all inner elements will be created. Like this :
// Both div and input elements are created with innerHTML
document.querySelector("#main-container").innerHTML = '<div class="outer"><input type="text" id="name" /></div>';
To append HTML string in this way browsers have the insertAdjacentHTML method.
The insertAdjacentHTML method expects 2 parameters :
- The position into which the HTML string will be appended to the element. There can be 4 positions :
- beforebegin : Appending will be performed before the element — this is not exactly an append as the new elements are created outside the target element.
- afterend : Appending will be performed after the element — again not exactly an append as the new elements are created outside the target element.
- afterbegin : Appending will be performed inside the element before its first child — this is more like a prepend.
- beforeend : Appending will be performed inside the element just before its last child — this is a classical append.
- The HTML text that is to be appended
For a normal append, the beforeend position is useful.
// Element into which appending will be done
var element = document.querySelector("#main-container");
// The HTML string to be appended
var html = '<div class="outer"><div class="inner"><input type="text" /><button id="submit">Submit</button></div>';
// append
element.insertAdjacentHTML('beforeend', html);
In many cases you need to use code like element.innerHTML += "html string". Using insertAdjacentHTML this could be written as :
element.insertAdjacentHTML("beforeend", "html string")
This has a better performance as described in insertAdjacentHTML() Enables Faster HTML Snippet Injection