HTML - DOM Element outerHTML Property

Quiz

The HTML DOM Element outerHTML property is used to access (get) and set (update) the entire HTML code of the specified element.

This property includes, while accessing a particular element, the opening tag of the element, attributes, contents (all child elements and textual content within the element), and closing tag.

This property is similar to the HTML innerHTML property, but the only difference between them is that the innerHTML property only gets and sets the element content and its child content, not the tag or any attributes.

Syntax

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

element.outerHTML = text;

Here, the text is the new HTML content you want to set for the element.

Use the following syntax to get the outerHTML property −

element.outerHTML;

Parameters

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

Return Value

This property returns a string that contains the HTML content of the element, including its attribute, start tag, and end tag.

Example 1: Retrieving the div Element Content

The following is a basic example of the HTML DOM Element outerHTML property, which retrieves the content of a <div> element −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element outerHTML</title>
</head>
<body>
<h3>HTML DOM Element outerHTML Property</h3>
<p>Click to get the div content.</p>
<div id="ex">
<p>Yes! I am a paragraph.</p>
</div>
<button onclick="changeOuterHTML()">Get div content</button>
<p id="result"></p>
<script>
   function changeOuterHTML() {
      const divEle = document.getElementById('ex');
      alert("Content inlcuding code: " + divEle.outerHTML);
   }
</script>
</body>
</html>

The above program retrieves the div content, including its complete code and its child elements.

Example 2: Setting the outerHTML Property

Following is another example of the HTML DOM Element outerHTML property. We use this property to set (update) the outerHTML of the list element −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element outerHTML</title>
</head>
<body>
<h3>HTML DOM Element outerHTML Property</h3>
<p>Click to update the list.</p>
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<button onclick="changeOuterHTML()">Update List</button>
<p id="result"></p>
<script>
   function changeOuterHTML() {
      let my_list = document.getElementById('myList');
      my_list.outerHTML = 
      `<ul class="new_list">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      </ul>`;
      document.getElementById("result").innerHTML = "List updated";
   }
</script>
</body>
</html>

When the displayed button is clicked, the list will be updated.

Example 3: Using outerHTML for Cloning

In the example below, we use this property to create a clone of the "div" element −

<!DOCTYPE html>
<html>
<title>HTML DOM Element outerHTML</title>
<body>
<h3>HTML DOM Element outerHTML Property</h3>
<p>Click button to clones the div elements</p>
<div id="real">
<p>This is a paragraph in the source.</p>
</div>
<button onclick="cloneElement()">Clone Element</button>
<script>
   function cloneElement() {
      const sourceDiv =document.getElementById('real');
      const clon = sourceDiv.outerHTML;
      // Creats new element same as HTML as the source
      const cloned = document.createElement('div');
      cloned.innerHTML = clon;
      // Appending the cloned element to the body
      document.body.appendChild(cloned);
   }
</script>
</body>
</html>

The above program creates the clone element of the div element when the button is clicked.

Example 4: Removing an Element

This example shows the usage of the outerHTML property. Using this property, we will remove a div element from the DOM by setting the outerHTML of the div element to an empty string ("") −

<!DOCTYPE html>
<html>
<title>HTML DOM Element outerHTML</title>
<body>
<h3>HTML DOM Element outerHTML Property</h3>
<p>Click the button it will remove the div element....</p>
<div id="ex">
<p>This paragraph will be removed.</p>
</div>
<button onclick="removeElement()">Remove Element</button>
<script>
   function removeElement() {
      const divEle = document.getElementById('ex');
      divEle.outerHTML = '';
   }
</script>
</body>
</html>

After executing the above program, a button displays that removes the paragraph when clicked.

Supported Browsers

Property
outerHTML	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page