Exploring the Document Object Model - HTML, CSS, and Dynamic HTML - page 905

Figure 13-8 Displaying the first puzzle

The outerHTML Property
The innerHTML property did not officially become part of the document object model
until the HTML5 DOM. It was previously part of only the IE DOM, though it also was
supported by all other major browsers because of its usefulness in creating dynamic
content. The HTML5 DOM also introduced another property, outerHTML , which also
can be used to change the HTML code contained within an HTML element. The differ-
ence is that the outerHTML property replaces both the element's content and the element
itself, while the innerHTML property only replaces the element's content. For example, if
a document contained the h1 element

<h1 id=”intro”>The Japanese Puzzle Factory</h1>
then running the command

document.getElementById(“intro”).outerHTML = “<h2>Hanjie Puzzle</h2>”;
would replace the entire HTML code including the opening and closing <h1> tags
and the id attribute. After this command was run, the document structure would have
changed and there no longer would be an h1 element with that id; thus, any subsequent
command that tried to locate such an element would return an error message. For this
reason, you should use caution when applying the outerHTML property.