Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM outerHTML property

  • Last Updated : 11 Jun, 2020

The outerHTML property of the DOM interface gives the HTML fragment of that element. It not only gives the content, but the whole HTML structure of the element. It can also be used to replace the HTML structure of the element.

Syntax:

  • To return the outerHTML.
    var value = element.outerHTML;
  • To set the outerHTML.
    element.outerHTML = "HTML_Structure";

Return value: When getting outerHTML, it returns HTML String data.

Example 1: This example shows how to get the outerHTML of an element with id=“gfg”.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksforGeeks</title>
</head>
  
<body>
    <div id="gfg">
        <h1>GeeksforGeeks</h1>
  
        <p>Welcome geeks!</p>
    </div>
      
    <script>
        var g = document.getElementById("gfg");
        document.write(g.outerHTML);
    </script>
</body>
  
</html>

Output:



The outerHTML of element can be seen in the output:

Example 2: This example shows how to set or change the outerHTML.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksforGeeks</title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <div id="d">
        Click on Button to change
        the outerHTML.
    </div>
    <br>
    <button onclick="changeouter()">click</button>
    <script>
        function changeouter() {
            var gfg = document.getElementById("d");
            gfg.outerHTML = 
            "<h3>Hey Geeks! outerHTML is changed</h3>";
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking the button:
  • After clicking the button:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :