innerHTML

InnerHTML is a property of DOM elements that gets or sets the HTML markup contained within the element's descendants. Reading innerHTML returns a string representing all child nodes as HTML. Writing to innerHTML replaces the element's contents with new nodes parsed from the string.

When you assign to innerHTML, the browser parses the provided string as HTML and reconstructs the element's child tree. This can be convenient for dynamic updates, templating, or injecting markup, but it can also disrupt existing references to child elements and trigger a reflow of the document.

Scripts embedded in the HTML string may not reliably execute when assigned to innerHTML, and inline event handlers are applied only to elements created by the parsing. Inserting untrusted content can pose security risks such as cross-site scripting.

Common uses include replacing a section of a page, building simple templates, or loading markup from a server. For inserting plain text only, innerHTML is inappropriate because it treats the input as markup.

Security considerations: sanitize untrusted input before inserting with innerHTML. If you only need to insert text, use textContent instead, or create elements with DOM methods to control attributes and events more safely.

Performance and compatibility: innerHTML is fast for large replacements, but it discards existing child nodes and can remove event listeners. It is widely supported in modern browsers; some edge cases occur with table-related elements.

Differences: outerHTML includes the element itself, while innerHTML concerns only the content inside the element. innerText and textContent return or set plain text; textContent is the standard way to access non-HTML text, while innerText reflects layout and rendering in some environments.