JSFiddle - React, Tailwind, and code Playground

by kellyjoe256

HTML

<div id="test">
    <p>Hello World!</p>
</div>

CSS

span.bar {
    color: #B22222;
}

JavaScript

function insertAdjacent(targetElement) {
    'use strict';
    return {
        insertAfter: function (newElement, targetElement) {
            var parent = targetElement.parentNode;
            if (parent.lastChild === targetElement) {
                parent.appendChild(newElement);
            } else {
                parent.insertBefore(newElement, targetElement.nextSibling);
            }
        },

        insertAtBegin: function (newElement) {
            var fChild = targetElement.firstChild;
            if (!fChild) {
                targetElement.appendChild(newElement);
            } else {
                targetElement.insertBefore(newElement, fChild);
            }
        },

        insertAtEnd: function (newElement) {
            var lChild = targetElement.lastChild;
            if (!lChild) {
                targetElement.appendChild(newElement);
            } else {
                this.insertAfter(newElement, targetElement.lastChild);
            }
        }
    };
}

var test = document.getElementById('test');

var span1 = document.createElement('span');
var span1Text = document.createTextNode('Hello at the beginning!');

span1.setAttribute('class', 'bar');
span1.appendChild(span1Text);

var span2 = document.createElement('span');
var span2Text = document.createTextNode('Hello at the end!');

span2.setAttribute('class', 'bar');
span2.appendChild(span2Text);

var adjacentInsert = insertAdjacent(test);

adjacentInsert.insertAtBegin(span1);
adjacentInsert.insertAtEnd(span2);