Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 31

TABLE 1-3 Properties available on a DOM element

Property Description

A collection of all child nodes of the parent element. childNodes

A reference to the very first child node in the list of child nodes of the parent node. irstChild

A reference to the very last child node in the list of the child nodes of the parent
node.

lastChild

A useful property that returns true if the parent element has any child nodes at all.
A good practice is to check this property before accessing other properties, such as
irstChild or lastChild .

hasChildNodes

For an example of these properties, you can change the preceding code to insert your
<article> element as the first element in the innerDiv element:

var inner = document.getElementById("innerDiv");
var element = inner.insertBefore(document.createElement("article"),inner.firstChild);
element.innerText = "My new <article> element";

This code produces the output shown in Figure 1-19.

FIGURE 1-19 The new <article> element inserted as the first child of a <div> element

Your <article> element is now positioned as the first child element of the innerDiv
element. Experiment with the other properties to become familiar with how they behave.
Every element that can have child elements supports all this functionality; however, if you
try to insert elements into a node that doesn't support child nodes—such as an <img> , for
example—the interpreter throws a run-time error.