Skip to content

JavaScript insert before Method | insert HTML before element example

  • by

How to insert HTML before elements in JavaScript without jQuery?

Use the before method to insert an element new element before a specific element.

And use The insertBefore() method to inserts a node as a child, right before an existing child, which you specify.

JavaScript insert before method examples

Let’s see 2 HTML example codes of JS insertbefore and before the method.

Before method Add a new element

<!DOCTYPE html>
    <div id="div1"> Div First</div>

        // Parent Element
        const ele = document.getElementById("div1");
        const newEl = document.createElement("div"); = "foo";




JavaScript insert HTML before element example

insertBefore method adds a new child

Insert a new “<li>” element before the first child element of an “<ul>”element:

<!DOCTYPE html>

    <ul id="tea">
      <li>Green Tea</li>
      <li>Black Tea</li>


      var newEl = document.createElement("li");
      var textnode = document.createTextNode("Ginger Tea");

  var list = document.getElementById("tea");

  list.insertBefore(newEl, list.childNodes[0]);



Another example code

        let menu = document.getElementById('menu');
        // create a new li node
        let li = document.createElement('li');
        li.textContent = 'Home';

        // insert a new node before the first list item
        menu.insertBefore(li, menu.firstElementChild);

Output: First example output

JavaScript insert before Method HTML

Do comment if you have any doubts and suggestions on JS insertbefore() method examples.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading