/ Gists / Before, Prepend, Append, After (insertAdjacentElement) ... (*Text, *Html)
On gists

Before, Prepend, Append, After (insertAdjacentElement) ... (*Text, *Html)

JavaScript

demo.html Raw # 

<!-- https://jsbin.com/pajoyovilu/3/edit?html,css,js,console,output -->


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
	
	
	<button onclick="placeTo('beforebegin')">before</button>
	<button onclick="placeTo('afterbegin')">prepend</button>
	<button onclick="placeTo('beforeend')">append</button>
	<button onclick="placeTo('afterend')">after</button>
	
	
	<div id="x">
		<div>START</div>
		<AA>aa</AA>
		<BB>bb</BB>
		<CC>cc</CC>
		<div>END</div>
		
	</div>
</body>
</html>

demo.css Raw # 

#x {
	border: 1px solid gray;
	padding: 1rem;
	margin-bottom: 1rem;
	margin-top: 1rem;
	
}

#x > * {
	border-left: 5px solid gray;
	padding-left: 0.5rem;
	margin-bottom: 0.5rem;
	display: block;
}

#newAdded {
	background: limegreen;
}

button {
	margin-bottom: 1rem;
}

demo.js Raw # 



function placeTo(place) {


let _newItem = document.createElement('div')
let x = document.querySelector('#x')

document.querySelector('#newAdded')?.remove()

_newItem.textContent = '*NEW*'
_newItem.id = 'newAdded';
	
x.insertAdjacentElement(place, _newItem)
}