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.