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