About
A fragment in HTML is a piece of HTML that is intended to be added dynamically into an web page.
How to insert Fragment in your document with Javascript
insertAdjacentHTML
Via insertAdjacentHTML)
- The fragment (You could have get it from an AJAX call)
let fragment = '<p>My fragment !</p>'
- Adding it in the document via the insertAdjacent function
document.body.insertAdjacentHTML('afterend', fragment);
- Result:
InnerHtml
Via InnerHTML, you can replace all descendant at once.
let fragment = '<p>My fragment !</p>'
document.body.innerHTML = fragment;
- Result:
HTML template
HTML has a template functionality that can be used to manage fragment.
HypertText Progressive Library
As the HypertText Progressive Library are based on the swap of HTML fragment, this libraries can also manage fragment.
Security
All fragment added dynamically as text with innerHTML or insertAdjacentHTML will not execute any script element.