JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <span>original content</span>
</div>

JavaScript

(function(window) {
	window.App = window.App || {};

	window.App = {
		insertElement: function(position, content) {
			var elDiv = document.getElementById('wrapper');
				elDiv.insertAdjacentHTML(position, content)
		}
	}
    
})(window);

// Insert the content
var content1 = '<p id="ct1">this is a paragrag a "beforebegin" element</p>';
var content2 = '<p id="ct2">this is a paragrag a "afterbegin" element</p>';
var content3 = '<p id="ct3">this is a paragrag a "beforeend" element</p>';
var content4 = '<p id="ct4">this is a paragrag a "afterend" element</p>';

App.insertElement('beforebegin', content1);
App.insertElement('afterbegin', content2);
App.insertElement('beforeend', content3);
App.insertElement('afterend', content4);