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

Figure 1-18 shows the output of this code.
FIGURE 1-18 A new <article> element appended to the bottom of the page
You can see that the <article> element was put in at the end of your page. The
appendChild method always adds the new element to the end of the parent element's child
node list. To insert the new <article> element somewhere more precise, the insertBefore
method could be more suitable. This method takes two parameters: the new element itself,
and the node before which you want to append the new element. For example, to insert your
new article before the innerDiv element, you could write the following code:
var element = document.getElementById("outerDiv").insertBefore(
document.createElement("article"),
document.getElementById("innerDiv"));
element.innerText = "My new <article> element";
This example uses the getElementById method to get a reference to the node before which
you wanted to insert your <article> element in the DOM. You can use other tools to make this
code simpler in some cases, depending on the document's structure. Each element or node
has the properties listed in Table 1-3 to help get references to the more common nodes when
working with the DOM.