HTML - DOM Element outerText Property

Quiz

The HTML DOM Element outerText property is used to set (update) and get (retrieve) the text content of an HTML element, including all its nested text and elements.

This property is similar to the textContent property, but there are some differences between them as follows:

Both properties get and set the content of an element.
The outerText property replaces the element itself when setting the content.
The textContent property does not replace the element; it only updates the content within the element.

Syntax

Following is the syntax of the HTML DOM Element outerText (to set the property) −

node.outerText = text;

Here, text is the new content that you want to set.

Use the following syntax to get the outerText property −

node.outerText;

Parameters

Since this is the property, it will not accept any parameter.

Return Value

This property returns a string containing the combined text of an element and all its nested text and elements when accessed.

Example 1: Retrieving the Current Text of DIV

The following is the basic example of the HTML DOM Element outerText property. It retrieves the current text (content) of the <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element outerText</title>
</head>
<body>
<h3>HTML DOM Element outerText Property</h3>
<p>Click button to retrieve current text of div.</p>
<div id="demo">Hey!, this is inside div</div><br>
<button onclick="retrieveText()">Change Text</button>
<p id="res"></p>
<script>
   function retrieveText() {
      var div_ele = document.getElementById('demo');
      document.getElementById("res").innerHTML = div_ele.outerText;
   }
</script>
</body>
</html>

The above program displays the current content (text) of the "div" element.

Example 2: Setting the Content of Paragraph (p) Element

Following is another example of the HTML DOM Element outerText property. We use this property to set the content of a <p> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element outerText</title>
</head>
<body>
<h3>HTML DOM Element outerText Property</h3>
<p>Click button to set text of p element.</p>
<p id="demo"></p>
<button onclick="retrieveText()">Set Content</button>
<script>
   function retrieveText() {
      var p_ele = document.getElementById('demo');
      p_ele.outerText = "This is the new text";
   }
</script>
</body>
</html>

After executing the above program, a new content will be set of a p element when the button is clicked.

Example 3: Updating the Existing Content

In the example below, we use this property to update (set) the old content of <li> element with new one −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element outerText</title>
</head>
<body>
<h3>HTML DOM Element outerText Property</h3>
<p>Click button to update "List item1" content.</p>
<ul>
   <li id="demo">List item1</li>
   <li>List item2</li>
   <li>List item3</li>
   <li>List item4</li>
</ul>
<button onclick="retrieveText()">Update Content</button>
<script>
   function retrieveText() {
      var p_ele = document.getElementById('demo');
      p_ele.outerText = "List item updated!";
   }
</script>
</body>
</html>

The above program updates the existing content with new one "List item updated!".

Supported Browsers

Property
outerText	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page