HTML Element .innerHTML Since: HTML5(IE origin → standardized)

// Get the HTML.
var html = element.innerHTML;

// Set the HTML.
element.innerHTML = "<p>New text</p>";

<div id="box">
	<p>Original text</p>
</div>

var box = document.querySelector("#box");

// Get the HTML.
console.log(box.innerHTML); // The HTML inside the element is output as-is.

// Set the HTML. Tags are interpreted as markup.
box.innerHTML = "<ul><li>Item 1</li><li>Item 2</li></ul>";

// Clear the element's content.
box.innerHTML = "";

Running the code above changes the HTML as follows.

<!-- Before -->
<div id="box">
	<p>Original text</p>
</div>

<!-- After setting innerHTML -->
<div id="box">
	<ul><li>Item 1</li><li>Item 2</li></ul>
</div>

<!-- After innerHTML = "" -->
<div id="box"></div>

Unlike element.textContent, HTML tags are interpreted as markup and actual elements are created in the DOM.

Inserting user-supplied input directly via element.innerHTML can allow malicious scripts to execute (XSS: Cross-Site Scripting).

// Dangerous example
var userInput = '<img src=x onerror="alert(document.cookie)">';
element.innerHTML = userInput; // The script will be executed.

// Use textContent for user input — it is safe.
element.textContent = userInput; // Displayed as a plain string.

element.innerHTML is a property that gets or sets the content of an element as an HTML string. When getting, it returns the string including any tag structure. When setting, the string is parsed as HTML and reflected in the DOM.

To clear an element's content, simply assign an empty string: element.innerHTML = "".

When displaying user input, it is recommended to use element.textContent for security reasons. Use element.innerHTML only when inserting trusted HTML dynamically.

element.innerHTML is covered in more detail in the tutorial article Changing Element Content with innerHTML. Feel free to check it out.