What is an HTML Fragment ?


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


Via insertAdjacentHTML)

  • The fragment (You could have get it from an AJAX call)
let fragment = '<p>My fragment !</p>'
document.body.insertAdjacentHTML('afterend', fragment);
  • Result:


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.


All fragment added dynamically as text with innerHTML or insertAdjacentHTML will not execute any script element.

Powered by ComboStrap