Add a new element after a selected element with just Javascript

Posted 2 years ago

    <div id='content'>
      Something
    </div>

    <script>
    /*
    * Create a function so we can reuse it later on
    * it takes two arguments:
    *   The element we are targeting (appending to)
    *   Our new element
    */
    function insertAfter(element, elementNew){
      element.parentNode.insertBefore(elementNew, elementNew.nextSibling);
    }

    var el = document.createElement('div'); // Create our new element
    el.innerHTML = 'New content in our new element'; // Add content into our newly created element
    var content = document.getElementById('content'); // Pass in our variable that selects the element we'd like to append to
    insertAfter(content, el); // Process the function

    </script>