DOM Manipulating Elements Append and Prepend methods


Example

JavaScript now have the Append and Prepend methods which was present in jQuery

The main advantage of append and prepend is unlike appendChild and insertBefore, it can take any number of arguments either HTML element or plain text(which will be converted to text nodes).

To append say 1 div, 1 text node and 1 span

document.body.append(document.createElement('div'),"Hello world",document.createElement('span'))

This will change the page to the following structure

<body>
      .....(other elements)
      <div></div>
      "Hello World"
      <span></span>
</body>

To prepend the same in body

Use

document.body.prepend(document.createElement('div'),"Hello world",document.createElement('span'))

This will change the page to the following structure

<body>
      <div></div>
      "Hello World"
      <span></span>
      .....(other elements)
</body>

Note that browser supports are

Chrome 54+
Firefox 49+
Opera 39+

Read more at MDN

Append

Prepend