Javascript DOM HTML Element outerHTML Property set

Introduction

Change a header element and it's content: 

document.getElementsByTagName("h1").outerHTML = "<h3>Header Changed!</h3>";

Click the button to change the header from a h1 to a h3.

View in separate window 

<!DOCTYPE html>
<html>
<body>

<h1>outerHTML</h1>
<button onclick="myFunction()">Change Header</button>

<script>
function myFunction() {/*from   w w  w.  j  av  a  2 s  . co  m*/
  var x = document.getElementsByTagName("h1")[0];
  x.outerHTML = "<h3>You changed the entire header element and it's content!</h3>";
}
</script>

</body>
</html>

The outerHTML property sets or gets the HTML element and all it's content, including

  • the start tag
  • it's attributes
  • the end tag.

The outerHTML property returns a String representing the HTML content of an element, including the start end the end tag.




PreviousNext

Related