HTML DOM outerHTML property
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 >w3wiki</ title > </ head > < body > < div id = "gfg" > < h1 style = "color:green" > w3wiki </ h1 > < p >Welcome Beginner!</ 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:
Example 2: This example shows how to set or change the outerHTML.
HTML
<!DOCTYPE html> < html > < head > < title >w3wiki</ title > </ head > < body > < h1 style = "color:green" > w3wiki </ 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 Beginner! outerHTML is changed</ h3 >"; } </ script > </ body > </ html > |
Output:
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 33
- Edge 12
- Firefox 11
- Internet Explorer 4
- Opera 8
- Safari 9