Java Reference
In-Depth Information
ing example, we can see all the HTML that is contained inside the section element with a
class of
sports
:
sports.innerHTML
<< "
<p class="swim">Swim</p>
<p id="bike">Bike</p>
<p>Run</p>
"
The
innerHTML
property is also writable and can be used to place a chunk of HTML in-
side an element. This will replace all of a node's children with the raw HTML contained in
the string. This saves you having to create a new text node as it is done automatically and
inserted into the DOM. It is also much quicker than using the standard DOM methods. For
example, the heading text that we changed before could be changed in one line:
h1.innerHTML = "Biathlon";
This becomes an even more powerful method if you want to insert a large amount of HTML
into the document. Instead of creating each element and text node individually, you can
simply enter the raw HTML as a string. The relevant nodes will then be added to the DOM
tree automatically. For example, we could change everything contained within the
sports
section:
sports.innerHTML = "<p>Skiing</p><p>Shooting</p>";
This will now remove all the paragraphs that were children of the
sports
section and re-
place them with two new child paragraph elements that contain a text node each, as shown
in
Figure 6.10
.
