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.





Discover More
HTML - CSS Style in Body (FOUC)

This article talks the Style element when it's located in the body element. It is accepted by browser but this is not the standard. The HMTL DTD does not allow it. But all browsers support it. Mainly...
How to load a script dynamically with Javascript?

This page shows you how you can load a script dynamically with Javascript to load and use it when needed. In short, if you add: a script via an DOM element, it will be executed (via append or insertAdjacentElement)...
Web - Single page application (SPA)

A Single Page Applications (SPAs) isone HTML page where the modification due to user interaction is completely managed by the browser script (ie javascript) Static web apps that require only a single...
What are Hypertext Progressive based App ?

An hypertext progressive app is a single page application model that is based: on the fetch of HTML fragment (ie hypertext) on the server that replaces only a part of the web page. The definition...
What is the innerHTML property and how does it work ?

innerHTML is a property of a node element that permits to set the whole descendants of this node with an HTML fragment outerHTML HTML fragmentInsertAdjacentHTML script elements inserted using...
What is the outerHTML property and how does it work ?

outerHTML is a property of a node element that permits to replace the target element with an HTML fragment innerHTML HTML fragmentInsertAdjacentHTML script elements inserted using outerHTML...
What is the script HTML element?

A client-side script is a program that is: linked (server-side script) or directly embedded in an HTML document (in-line script) Scripts in HTML have “run-to-completion” semantics, meaning that...



Share this page:
Follow us:
Task Runner