What is an HTML Fragment ?

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>'
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.


Powered by ComboStrap