JavaScript Manipulating Document Elements

Insertion

We can insert new nodes into our DOM tree by using a node's append, appendChild, prepend methods. This means that we first have to select a node and then call these methods.

Append

The append method is a relatively new addition to the Web API standard, and can insert one or more complex nodes or text nodes in one call. append inserts nodes after the last child of the parent.

Code example

Copy
<div id="target">
</div>

<script>
  const target = document.querySelector("#target")
  target.append(
    document.createElement("p"),
    "Abc"
  )
</script>

which appends an empty paragraph and a text node to the #target divider.

Prepend

The prepend method is similar to the append method but inserts nodes before the first child of the parent.

Code example

Copy
<div id="target">
  <p>I am/was first</p>
</div>

<script>
  const target = document.querySelector("#target")
  target.prepend(
    document.createElement("img"),
    "Abc"
  )
</script>

which prepends an image element and a text node to the #target divider such that the original paragraph ends up as the last node.