Target/Modify Entire HTML Document Using JS (Including head)

JavaScript gives us the ability to target and manipulate the entire HTML document, including the head element, using document.documentElement.

In this article, we’ll explore the capabilities and applications of this invaluable feature.

Understanding document.documentElement

Before we dive into utilizing document.documentElement, let’s grasp the concept of the Document Object Model (DOM).

The DOM represents the structure of a document as a tree of nodes, with the document object serving as the root.

The documentElement property of the document object provides access to the root element of the document, typically the <html> element.

const htmlElement = document.documentElement;

By accessing document.documentElement, we can target and manipulate the entire HTML document, including its head and body elements.

Replacing the Entire HTML Document with a String

One of the most remarkable capabilities that document.documentElement offers is the ability to replace the entire HTML document, including both the head and body, with a new HTML structure stored in a string.

This can be incredibly useful in scenarios where a full document refresh or change is needed without reloading the page.

Let’s delve into a practical example of how to achieve this feat:

const newHtmlContent = ` 
<!DOCTYPE html> <html> <head> <title>New Document</title> </head> <body> <h1>Hello, New Document!</h1> <p>This is a completely new HTML content.</p> </body> </html> 

const replaceDocument = () => { 

document.open(); document.write(newHtmlContent); document.close(); 


// Call replaceDocument() to replace the current HTML document

In this example, we have a new HTML structure stored in the newHtmlContent string.

The replaceDocument function opens the document, writes the new content, and then closes it.

When this function is invoked, the entire existing HTML document is replaced with the content defined in newHtmlContent.

This approach is particularly useful when you want to dynamically load new content or templates without requiring a complete page reload, providing a seamless user experience.

Accessing and Modifying the Head Element

The head element, often containing crucial metadata and links to stylesheets and scripts, plays a pivotal role in shaping the document’s behavior and appearance.

With document.documentElement, we can access and modify the head element effortlessly.

const headElement = document.documentElement.querySelector('head');

or simply,

const headElement = document.querySelector('head');

By querying for the head element using querySelector, we can then proceed to manipulate its content, such as adding new meta tags, linking stylesheets, or appending scripts dynamically.

For example,

const metaTag = document.createElement('meta'); metaTag.setAttribute('charset', 'UTF-8'); headElement.appendChild(metaTag);

In this example, we create a new meta tag specifying the character encoding and append it to the head element.

Enhancing Document Behavior

document.documentElement opens the door to a multitude of possibilities for enhancing the behavior and functionality of the entire HTML document.

For instance, we can dynamically toggle dark mode across the entire page.

const toggleDarkMode = () => { 
const bodyElement = document.body; const htmlElement = document.documentElement; bodyElement.classList.toggle('dark-mode'); htmlElement.classList.toggle('dark-mode-html'); 
// Trigger the toggle on a button click or any other event

By toggling specific classes on both the <body> and <html> elements, we can easily switch between light and dark modes, providing users with a customizable interface.

Note that this will only work if the required CSS is included.


The ability to replace the entire HTML document using document.documentElement and a prepared HTML string showcases the flexibility and power of JavaScript in web development.

Leveraging this feature, we can perform comprehensive updates to the document structure without the need for a full page reload.

Whether it’s for updating content dynamically or refreshing the page layout, understanding how to replace the document content with a string gives web developers a valuable tool to create fluid and dynamic web applications.

About The Author

Anirban is a full-stack developer and an SEO expert. He has 6 years of experience in web development and software engineering. With a passion for writing, he has been blogging since 2017.

Leave a Comment

Love The Article? You Can