Get or Set HTML of an Element in JavaScript

In JavaScript, the primary way to interact with the HTML content inside an element is through a set of properties that allow you to read (get) or modify (set) the internal structure of the DOM. While these properties may appear similar, they behave differently regarding performance, security, and the types of nodes they affect.

1. innerHTML

The innerHTML property is the most versatile and frequently used tool for managing an element’s content. It retrieves or sets the HTML markup contained within the element as a string.

Getting Content:

When you “get” innerHTML, the browser serializes the current DOM tree inside the element into an HTML string.

const content = document.getElementById('container').innerHTML;
// Returns: "<span>Hello <strong>World</strong></span>"

Setting Content:

When you “set” innerHTML, the browser removes all existing child nodes and parses the new string into brand-new DOM nodes.

const box = document.getElementById('box');
box.innerHTML = '<div class="alert">Success!</div>';

[!CAUTION] Security Warning: Never use innerHTML to insert user-provided text. This opens your application to Cross-Site Scripting (XSS) attacks, where a user can inject malicious <script> tags that execute in the context of your site.

2. outerHTML

While innerHTML deals with the contents of an element, outerHTML represents the element itself and all its children.

• Getting: Returns the HTML of the element and its content.
• Setting: Replaces the element in the DOM tree with the new HTML provided.

const btn = document.querySelector('.old-button');
console.log(btn.outerHTML); // Returns: <button class="old-button">Click</button>

// Replacing the entire button with a link
btn.outerHTML = '<a href="/home">Go Home</a>';

3. textContent

If you only need to work with the raw text and want to ignore all HTML tags, textContent is the safest and most efficient choice.

• Logic: It returns the text content of all nodes inside the element, including text inside hidden elements (like <style> or <script>).
• Safety: It does not parse strings as HTML. If you try to set textContent = “<b>Hi</b>”, it will literally display the characters <b> and </b> on the screen.

const header = document.querySelector('h1');
header.textContent = "New Title"; // Safely updates text

const element = document.getElementById('myElement');

// Getting the visible text
console.log(element.innerText);

// Setting new text (all HTML tags in the string will be escaped)
element.innerText = "This is <b>not</b> bold text."; 
// Output on screen: This is <b>not</b> bold text.

const div = document.querySelector('#main');
// Adds a new paragraph at the very end of the div
div.insertAdjacentHTML('beforeend', '<p>New content added efficiently.</p>');