Live Demo: insert-html-without-replacing-the-existing-content

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Insert HTML without Replacing the Existing Content</title>
</head>
<body>
    
	<div id="main">
		
		<h1 id="title">Hello World!</h1>
		
	</div>
	
	
	<button type="button" onclick="insertContent()">Insert Content</button>
	
	<script>
	function insertContent() {
		// Selecting target element
		let mainDiv = document.getElementById("main");
		 
		// Inserting HTML just before the element itself, as a previous sibling
		mainDiv.insertAdjacentHTML('beforebegin', '<p>This is paragraph one.</p>');
		 
		// Inserting HTML just inside the element, before its first child
		mainDiv.insertAdjacentHTML('afterbegin', '<p>This is paragraph two.</p>');
		 
		// Inserting HTML just inside the element, after its last child
		mainDiv.insertAdjacentHTML('beforeend', '<p>This is paragraph three.</p>');
		 
		// Inserting HTML just after the element itself, as a next sibling
		mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>');
	}	
	</script>
</body>
</html>

Code Editor

Output Preview