JavaScript Manipulating Document Elements

Creation

We can create complex new HTML elements by using the document object's createElement method, or simple text nodes by using the createTextNode method.

Code example: list element

Copy
<h2>My emotions has three outlets:</h2>
<ul>
  <li>haughty silence</li>
  <li>tears</li>
</ul>

<script>
  const list = document.querySelector("ul")
  const newLi = document.createElement("li")
  newLi.appendChild(document.createTextNode("and rage"))
  list.appendChild(newLi)
</script>

The JavaScript in the example above creates a new list element using createElement, inserts a simple text node into it using appendChild and finally appends the whole new list element to the original list.