HTML DOM outerHTML property Last Updated : 19 Jun, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: let 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 style="color:green"> GeeksforGeeks </h1> <p>Welcome geeks!</p> </div> <script> let g = document.getElementById("gfg"); document.write(g.outerHTML); </script> </body> </html> Output: The outerHTML of the element can be seen in the output: HTML DOM outerHTML property Example 2: This example shows how to set or change the outerHTML. HTML <!DOCTYPE html> <html> <head> <title>GeeksforGeeks</title> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <div id="d"> Click on Button to change the outerHTML. </div> <br> <button onclick="changeouter()">click</button> <script> function changeouter() { let gfg = document.getElementById("d"); gfg.outerHTML = "<h3>Hey Geeks! outerHTML is changed</h3>"; } </script> </body> </html> Output: HTML DOM outerHTML property We have a complete list of HTML DOM methods, to check those please go through the HTML DOM Complete Reference article. Supported Browsers: Google Chrome 33Edge 12 Firefox 11Internet Explorer 4Opera 8Safari 9 Comment More infoAdvertise with us Next Article HTML | DOM HTML Object T taran910 Follow Improve Article Tags : JavaScript Web technologies HTML-DOM HTML-Property Similar Reads HTML DOM innerHTML Property The innerHTML property sets or returns the HTML content (inner HTML) of an element. It allows you to manipulate the inner content, including HTML tags, by assigning new HTML strings or retrieving existing content, making it useful for dynamic updates on web pages.SyntaxIt returns the innerHTML Prope 2 min read HTML DOM innerText Property The DOM innerText Property is used to set or return the text content of a specified node and its descendants. This property is very similar to the text content property but returns the content of all elements, except for <script> and <style> elements. Syntax: It is used to set the innerT 2 min read HTML DOM lastChild Property The DOM lastChild property is used to return the last child of the specified node. It returns the last child nodes as text, comment, or element nodes (depend on which occurs at last). It is a read-only property. Syntax: node.lastChild Return Value: It returns a node object which represents the last 2 min read HTML | DOM HTML Object The HTML Object property in HTML DOM is used to represent or access the HTML <html> element with in the object. The <html> element is used to return the HTML document as an Element Object. Syntax: It is used to access a <html> element.var x = document.getElementsByTagName("HTML")[0 3 min read HTML DOM Object hspace Property The HTML DOM Object hspace property is used to set or return the value of the hspace attribute of the <object> element. The hspace attribute is used to specify the number of whitespaces for the left and right side of an Object. Syntax It returns the hspace Property. objObject.hspace; It sets t 2 min read HTML DOM body Property The HTML DOM Body property is used to set the document <body> element. It only returns the content present in the <body> Tag. This property is used to change the present content inside the <body> element and sets them with the new specified content. This property does not return th 2 min read Like