Before, After, Prepend, Append DOM functions

before_after_prepend_append.js

(function(){
	
	// Prepend
	// put HTML string AFTER OPENING tag of another element
	// (example hard to see because hidden behind promo drawer tag)
	var selector = '#mainContent';
	var htmlString = ''+
		'<div style="text-align:center;" class="redText">'+
			'<h2>Hello World - PREPEND</h2>'+
		'</div>';	
	prepend(selector, htmlString);
	
	
	// Append
	// put HTML string BEFORE CLOSING tag of another element
	// (example hard to see because hidden behind promo drawer tag)
	var selector = '#mainContent';
	var htmlString = ''+
		'<div style="text-align:center;" class="redText">'+
			'<h2>Hello World - APPEND</h2>'+
		'</div>';	
	append(selector, htmlString);
	
	
	// Before - example
	// put HTML string before element
	var selector = '#mainContent';
	var htmlString = ''+
		'<div style="text-align:center;" class="redText">'+
			'<h2>Hello World - BEFORE</h2>'+
		'</div>';	
	before(selector, htmlString);


	// After - example
	// put HTML string after element
	var selector = '#mainContent';
	var htmlString = ''+
		'<div style="text-align:center;"  class="redText">'+
			'<h2>Goodbye World - AFTER</h2>'+
		'</div>';	
	after(selector, htmlString);
	

	// NOTE insertBefore / appendChild and insertAdjacentHTML() do similar but the former expects nodes instead of HTML string

	// Prepend
	// put HTML string AFTER OPENING tag of another element
	function prepend(selector,htmlString){
		var el = document.querySelector(selector);
		//el.insertBefore(getHTMLNode(htmlString), el.firstElementChild);
		document.querySelector(selector).insertAdjacentHTML('afterbegin', htmlString);
	}	
	// Append
	// put HTML string BEFORE CLOSING tag of another element
	function append(selector,htmlString){
		var el = document.querySelector(selector);
		//el.appendChild(getHTMLNode(htmlString));
		document.querySelector(selector).insertAdjacentHTML('beforeend', htmlString);
	}
	// Before
	// put HTML string before element
	function before(selector,htmlString){
		document.querySelector(selector).insertAdjacentHTML('beforebegin', htmlString);
	}
	// After
	// put HTML string after element
	function after(selector,htmlString){
		document.querySelector(selector).insertAdjacentHTML('afterend', htmlString);
	}
	
	// turns HTML string into node
	function getHTMLNode(str) {
	  var tmp = document.implementation.createHTMLDocument();
	  tmp.body.innerHTML = str;
	  return tmp.body.children[0];
	};
		
})()