Best JavasScript DOM functions

javascript-dom-function.md

Add Element/HTML to Another Element

const container = document.querySelector('div')
const element = document.querySelector('p')

For node (element)

container.prepend(element)         // Insert at begin of container
container.replaceChildren(element) // Replace all inside container
container.replaceWith(element)     // Replace self container
container.append(element)          // Insert at end of container

For pure HTML

container.insertAdjacentHTML('afterbegin', '<p>Aloha moon.</p>') // Insert at begin of container
container.innerHTML = '<p>Aloha moon.</p>'                       // Replace all inside container
container.outerHTML = '<p>Aloha moon.</p>'                       // Replace self container
container.insertAdjacentHTML('beforeend', '<p>Aloha moon.</p>')  // Insert at end of container