DOM Insetion Methods

Methods to easily insert DOM nodes

by Jesse Johnson

HTML

<div class="parent">
  <div class="child">
    <h1>Static Child 1</h1>
  </div>
</div>

CSS

body {
  color: #717171;
  line-height: 1.5;
  background-color: #f5f5f5;
  font-family: "Premiera", "Cambria", "Roboto Slab", "Georgia", "Times New Roman", serif, ".PhoneFallback", "Arial Unicode MS";
  font-size: 13px;
}

.parent {
  color: #f5f5f5;
  padding: 1rem;
  background-color: #717171;
}

JavaScript

var parent = document.querySelector('.parent');
var textNode = document.createTextNode('Static Child 2');
var headingNode = document.createElement('h1');
var divNode = document.createElement('div');

divNode.classList.add('child');
append(headingNode, textNode);
append(divNode, headingNode);
append(parent, divNode);

/**
 * after
 * @param {Element} element
 * @param {String|Node|NodeList|Array<Node>} content
 */
function after(element, content) {
  if (isString(content)) {
    return element.insertAdjacentHTML('afterEnd', content);
  } else {
    // when the second parameter of 'insertBefore' is 'null' the content is
    // appended to the end of the 'parentNode'.
    return element.parentNode.insertBefore(normalizeContent(content), element.nextSibling);
  }
}
/**
 * append
 * @param {Element} element
 * @param {String|Node|NodeList|Array<Node>} content
 */
function append(element, content) {
  if (isString(content)) {
    return element.insertAdjacentHTML('beforeEnd', content);
  } else {
    return element.appendChild(normalizeContent(content));
  }
}
/**
 * before
 * @param {Element} element
 * @param {String|Node|NodeList|Array<Node>} content
 */
function before(element, content) {
  if (isString(content)) {
    return element.insertAdjacentHTML('beforeBegin', content);
  } else {
    return element.parentNode.insertBefore(normalizeContent(content), element);
  }
}
/**
 * prepend
 * @param {Element} element
 * @param {String|Node|NodeList|Array<Node>} content
 */
function prepend(element, content) {
  if (isString(content)) {
    return element.insertAdjacentHTML('afterBegin', content);
  } else {
    return element.insertBefore(normalizeContent(content), element.firstChild);
  }
}
/**
 * Determine if the value is a string
 * @return {Boolean}
 */
function isString(value) {
  return typeof value == 'string';
}
/**
 * Determine if the object is a DOM Node
 * @return {Boolean}
 */
function isNode(o) {
  return (
    typeof Node == 'object' ?
    o instanceof...