Cacher is the code snippet organizer for pro developers

//Get child nodes
var stored = document.getElementById('heading');
var children = stored.childNodes;
console.log(children);

//Get parent node
var parental = children.parentNode;

//create new elments
var newHeading = document.createElement('h1');
var newParagraph = document.createElement('p');

//create text nodes for new elements
var h1Text= document.createTextNode("This is the fucking header text!");
var paraText= document.createTextNode("This is the fucking Paragraph text!");

//attach new text nodes to new elements
newHeading.appendChild(h1Text);
newParagraph.appendChild(paraText);

//elements are now created and ready to be added to the DOM.

//grab element on page you want to add stuff to
var firstHeading = document.getElementById('firstHeading');

//add both new elements to the page as children to the element we stored in firstHeading.
firstHeading.appendChild(newHeading);
firstHeading.appendChild(newParagraph);

//can also insert before like so

//get parent node of firstHeading
var parent = firstHeading.parentNode;

//insert newHeading before FirstHeading
parent.insertBefore(newHeading, firstHeading);

//Suppose you have the following HTML
<div id="box1">
    <p>Some example text</p>
</div>
<div id="box2">
    <p>Some example text</p>
</div>

//you can insert another snippet of HTML between #box1 and #box2 
var box2 = document.getElementById("box2");
box2.insertAdjacentHTML('beforebegin', '<div><p>This gets inserted.</p></div>');

//beforebegin - The HTML would be placed immediately before the element, as a sibling.
//afterbegin - The HTML would be placed inside the element, before its first child.
//beforeend - The HTML would be placed inside the element, after its last child.
//afterend - The HTML would be placed immediately after the element, as a sibling.

//Returns a reference to the element by its ID.
document.getElementById(id);

//Returns an array-like object of all child elements which have all of the given class names.
document.getElementsByClassName(names);

//Returns an HTMLCollection of elements with the given tag name. 
document.getElementsByTagName(name);

//Returns the first element within the document that matches the specified group of selectors.
document.querySelector(selectors);

//Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) 
//that match the specified group of selectors. 
document.querySelectorAll(selectors);