Content manipulation with DOM (innerText, innerHTML, outerText, outerHTML)

DOM extensions for content manipulation using markup and text insertion properties are useful for setting and retrieving text, HTML between start and end tags of an element, next to an element, etc. Those properties are innerHTML, innerText, outerHTML, outerText, insertAdjacentElement, insertAdjacentHTML and textContent. However mostly used are innerHTML, innerText, outerHTML, and outerText; with the innerHTML being by far the most popular ones.

NOTE: These properties were introduced by Internet Explorer to facilitate inserting or removing entirely the markup or text within a parent element, but the innerHTML and outerHTML one quickly became a de-facto standard for DOM language.

innerText

The innerText property sets or retrieves the text between the start and end tags of the object. The innerText property is valid for block elements only. By definition, elements that do not have both an opening and closing tag cannot have an innerText property.

The innerText property is read-only on the html, table, tbody, tfoot, thead, and tr objects. The innerText properties are still supported ONLY the Internet Explorer extensions.

The example below uses the innerText property to replace an object's contents. The object surrounding the text is not replaced.

Example of innerText property

<!DOCTYPE html>
<html>

<style>
  p {border:2px inset #666; padding:0.4em 0.1em 0.5em;font-family:Calibri;}
  button {padding:0.4em 0.8em; margin:0px 10px; font-family:"Calibri"; color:#55f}
</style>

<body>	
	<p id='myText'>Budget information.</p>
  	<button id="nextButton" onclick="innerTextFunc()">Change text here</button>

	<script>
     	function innerTextFunc(){ 
			var myElem = document.getElementById("myText");
			myElem.innerText = 'Trip info!';
     	}
	</script>  
</body>

</html>

outerText

The outerText property sets or retrieves the text of the object. Using outerText property, the given string completely replaces the original text in the object. Just like innerText, the outerText property is read-only on the html, tbody, td, tfoot, th, thead, and tr objects.

This example below the outerText property to replace an object's content; the object itself also is replaced. In this example after the execution of the outerText code, <p> tag with id ‘myText’ is completely removed from the DOM and is replaced by ‘Trip Info!’ text. The outerText properties are still supported ONLY in Internet Explorer extensions.

Example of outerText property

<!DOCTYPE html>
<html>

<style>
  p {border:2px inset #666; padding:0.4em 0.1em 0.5em;font-family:Calibri;}
  button {padding:0.4em 0.8em; margin:0px 10px; font-family:"Calibri"; color:#55f}
</style>

<body>	
    <div id="oDiv">
        <p id='myText'>Budget information</p>
    </div>
    <button id="nextButton" onclick="outerTextFunc()">Change text here</button>

    <script>
        function outerTextFunc(){
            var myElem = document.getElementById("myText");
            myElem.outerText = 'Trip info!';
        }
    </script>
    </body>

</html>

innerHTML

The innerHTML markup insertion properties were adopted by HTML5 from Internet Explorer as they were easy and fast to take a string that contains HTML and feed it to the browser’s HTML parser. This property sets or gets the HTML syntax describing the element's descendants. The innerHTML property is valid for both block and inline elements. By definition, elements that do not have both an opening and closing tag cannot have an innerHTML property. When the innerHTML property is set, the given string completely replaces the existing content of the object. If the string contains HTML tags, the string is parsed and formatted as it is placed into the document.

Syntax for innerHTML property

// Getter:

var content = element.innerHTML;

// Setter:

element.innerHTML = content;

Following example shows the usage of innerHTML property to replace the markup HTML in the code fragment.

Example of innerHTML property

<!DOCTYPE html>
<html>

<style>
  p {border:2px inset #666; padding:0.4em 0.1em 0.5em;font-family:Calibri;}
  button {padding:0.4em 0.8em; margin:0px 10px; font-family:"Calibri"; color:#55f}
</style>

<body>	
    <div id="Accounts"><div id="Purchases">Purchasing info</div></div>
    <button id="nextButton" onclick="innerHTMLFunc()">Apply changes here</button>

    <script>
        function innerHTMLFunc(){
            var elem = document.getElementById("Purchases");
            elem.innerHTML = "<p>Purchase info no longer available</p>";
        }
    </script>
</body>

</html>

outerHTML

The outerHTML markup insertion properties were adopted by HTML5 from Internet Explorer as they were easy and fast to take a string that contains HTML and feed it to the browser’s HTML parser. The outerHTML attribute of the element gets the HTML fragment describing the element including its descendants. When the property is set, the given string completely replaces the object, including its start and end tags. If the string contains HTML tags, the string is parsed and formatted as it is placed into the document. The outerHTML property is read-only on the caption, col, colgroup, html, head, body, frameset, tbody, td, tfoot, th, thead, and tr objects.

This example shown below uses the outerHTML property to replace a node with another one.

Example of outerHTML property

<!DOCTYPE html>
<html>

<style>
  p {border:2px inset #666; padding:0.4em 0.1em 0.5em;font-family:Calibri;}
  button {padding:0.4em 0.8em; margin:0px 10px; font-family:"Calibri"; color:#55f}
</style>

<body>	
    <div id="Accounts"><div id="Purchases">Purchasing info</div></div>
    <button id="nextButton" onclick="outerHTMLFunc()">Apply changes here</button>

    <script>
        function outerHTMLFunc(){ 
            var myContainer = document.getElementById("Accounts");
            var elem = document.getElementById("Purchases");
            console.log(myContainer.firstChild.nodeName); 
            elem.outerHTML = "<p>Purchase info no longer available</p>";
            console.log(myContainer.firstChild.nodeName); 
        }
    </script>
</body>

</html>

›› go to examples ››