Set the outer text of an element:
document.getElementById("myH1").outerText = "Changed content!";
Click the button to change and remove the h1 element:
When setting the outerText, the entire element gets replaced.
<!DOCTYPE html> <html> <body> <h1>Set outerText</h1> <button onclick="myFunction()">Change Header</button> <script> function myFunction() {/*from w w w . j ava 2 s .c o m*/ var x = document.getElementsByTagName("h1")[0]; x.outerHTML = "Changed content!"; } </script> </body> </html>
The outerText property sets or gets the text content of the specified node.
The outerText returns the same result as the innerText property.
When setting an element's outerText, the element itself is removed.
The outerText property returns a String representing the text content of a node and all its descendants.