HTML - DOM Element insertBefore() Method

Quiz

The HTML DOM Element insertBefore() method is used to add a new child element to a parent element, specifying its position relative to another existing child element.

The elements are inserted before the specified reference element within the parent element's list of children.

Syntax

Following is the syntax of the HTML DOM Element insertBefore() method −

parentElement.insertBefore(newElement, referenceElement);

Parameters

Following are the parameters of this function −

Parameter	Description
newElement	Element to be inserted into parentElement.
referenceElement	The element before which newElement will be inserted.

Return Value

This method does not return anything (undefined).

Example 1: Inserting Before Existing Element

The following program demonstrates the usage of the HTML DOM Element insertBefore() method by inserting a new child element inside a parent element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element insertBefore()</title>
</head>
<body>
<h3>HTML DOM Element insertBefore() Method</h3>
<div id="parent">
   <p id="child1">First Child</p>
   <p id="child3">Third Child</p>
</div>
<script>
   var parentElement = document.getElementById("parent");
   var newElement = document.createElement("p");
   newElement.textContent = "Second Child (Inserted)";
   newElement.style.color = "blue";  
   var referenceElement = document.getElementById("child3");
   parentElement.insertBefore(newElement, referenceElement);
</script>
</body>
</html>

The above program inserts a child element just before the last element inside the parent element.

Example 2: Appending if Reference Element is Null

Following is another example of the HTML DOM Element insertBefore() method. We use this method to append a new item to the end of the list if the reference element is null −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element insertBefore()</title>
</head>
<body>
<h3>HTML DOM Element insertBefore() Method</h3>
<p>click the button to insert the new Item...</p>
<ul id="myList">
   <li>Apple</li>
   <li>Banana</li>
   <li>Orange</li>
</ul>
<button onclick="addItem()">Add Item</button>
<script>
   function addItem() {
      var myList = document.getElementById("myList");
      var newItem = document.createElement("li");
      newItem.textContent = "Grapes";
      // Reference element is null,will added to end
      myList.insertBefore(newItem, null);
   }
</script>
</body>
</html>

Once the above program is executed, a new item will be added to the end of the list.

Example 3: Dynamically adding Book List

This example shows how to dynamically add items (books) to a list using the insertBefore() method. It uses firstChild as a reference and shows how elements can be inserted at specific positions −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM insertBefore()</title>
</head>
<body>
<h3>HTML DOM Element insertBefore() Method</h3>
<p>click the button to add your Fav Book...</p>
<h1>Favorite Books</h1>
<ol id="bookList">
   <li>The Great Gatsby</li>
   <li>To Kill a Mockingbird</li>
</ol>
<button onclick="addBook()">Add Book</button>
<script>
   function addBook() {
      var bookList = document.getElementById("bookList");
      var newBook = document.createElement("li");
      var bookTitle = prompt("Enter new book title:");
      newBook.textContent = bookTitle || "New Book";
      // Reference element is the first child, 
      // new book will be added at the beginning
      var referenceElement = bookList.firstChild;
      bookList.insertBefore(newBook, referenceElement);
   }
</script>    
</body>
</html>

The above program added the book dynamically to the first position in the given list.

Supported Browsers

Method
insertBefore()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page