DOM Add, Remove

Sample HTML

<div id="c-box">
	<div id="box"></div>
</div>

Append, Prepend

const cBox = document.querySelector('#c-box')

const append = document.createElement('p')
append.innerText = 'Append'
cBox.append(append)

const prepend = document.createElement('p')
prepend.innerText = 'Prepend'
cBox.prepend(prepend)

console.log(cBox.outerHTML)

<div class="none" id="c-box">
	<p>Prepend</p>
	<div id="box"></div>
	<p>Append</p>
</div>

Before, After

const cBox = document.querySelector('#c-box')
const box = document.querySelector('#box')

const before = document.createElement('p')
before.innerText = 'Before'
box.before(before)

const after = document.createElement('p')
after.innerText = 'After'
box.after(after)

console.log(cBox.outerHTML)

<div class="none" id="c-box">
	<p>Before</p>
	<div id="box"></div>
	<p>After</p>
</div>

Multiple arguments

const cBox = document.querySelector('#c-box')

const p1 = document.createElement('p')
p1.innerText = 'P1'

const p2 = document.createElement('p')
p2.innerText = 'P2'

cBox.append(p1, p2, 'TEXT')

console.log(cBox.outerHTML)

<div id="c-box">
	<div id="box"></div>
	<p>P1</p>
	<p>P2</p>
	TEXT
</div>

Insert HTML

const cBox = document.querySelector('#c-box')
const box = document.querySelector('#box')

const p = document.createElement('p')
p.innerHTML = '<span>TEXT</span>'
box.append(p)

cBox.insertAdjacentHTML('beforeend', '<p>Append</p>')
cBox.insertAdjacentHTML('afterbegin', '<p>Prepend</p>')

box.insertAdjacentHTML('beforebegin', '<p>Before</p>')
box.insertAdjacentHTML('afterend', '<p>After</p>')

console.log(cBox.outerHTML)

<div class="none" id="c-box">
	<p>Prepend</p>
	<p>Before</p>
	<div id="box">
		<p><span>TEXT</span></p>
	</div>
	<p>After</p>
	<p>Append</p>
</div>

Clone

const cBox = document.querySelector('#c-box')

const p1 = document.createElement('p')
p1.innerText = 'TEXT'
p1.classList.add('item')
p1.dataset.id = 'ID'

const p2 = p1.cloneNode()

// Deep copy
const p3 = p1.cloneNode(true)

cBox.append(p1, p2, p3)

console.log(cBox.outerHTML)

<div class="none" id="c-box">
	<div id="box"></div>
	<p class="item" data-id="ID">TEXT</p>
	<p class="item" data-id="ID"></p>
	<p class="item" data-id="ID">TEXT</p>
</div>

Remove

const cBox = document.querySelector('#c-box')
const box = document.querySelector('#box')

console.log(cBox.outerHTML)

box.remove()

console.log(cBox.outerHTML)

<div class="none" id="c-box">
	<div id="box"></div>
</div>

<div class="none" id="c-box"></div>

Replace

const cBox = document.querySelector('#c-box')
const p = document.createElement('p')
const span = document.createElement('span')

cBox.append(p)

console.log(cBox.outerHTML)

p.replaceWith(span)

console.log(cBox.outerHTML)

<div class="none" id="c-box">
	<div id="box"></div>
	<p></p>
</div>

<div class="none" id="c-box">
	<div id="box"></div>
	<span></span>
</div>