If we want to insert content in a HTML document we have three ways to do it:
- Using DOM methods like
createNodeandappendChild - Using Document Fragments
- Using
innerHTML
One can arguably say we also have document.write for few use cases.
innerHTML has been standardized in HTML5 and with it a brother method insertAdjacentHTML which works as innerHTML but allows us to define more specifically where we want to insert the HTML content: beforeBegin, afterBegin, beforeEnd and afterEnd.
var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");
Back in 2008 John Resig wrote an article about insertAdjacentHTML with this conclusion:
Until now, the main issue with insertAdjacentHTML has been its lack of browser support. With Firefox implementing insertAdjacentHTML as of version 8, it will available in all major browsers including mobile browsers. If you want to use it now and make sure it works in Firefox versions earlier than 8 you can use this polyfill.