JavaScript: insertBefore() & Insert After

The insertBefore() method inserts an HTML element as a child of some specified parent node before the referenced node.

This method has to be called upon the parent of the element you are about to insert some new element before. The syntax is as follows:

				parentNode.insertBefore(newNode, referenceNode);
			

Consider the below list of pre-defined options specified by the <datalist/> tag for the <input/> element.

				
				<input list="books">

				<datalist id="books">
				  <option value="Prince Caspian">
				  <option value="The Voyage of the Dawn Treader">
				  <option value="The Silver Chair">
				  <option value="The Horse and His Boy">
				  <option value="The Magician's Nephew">
				  <option value="The Last Battle">
				</datalist>
				
			

As you might have been aware, those are the books of the fantasy novel series The Chronicles of Narnia written by C.S. Lewis.

The first book of the series titled The Lion, the Witch and the Wardrobe (1950) is not listed in the above datalist. We will insert it just before Prince Caspian, the second book in the series, using the insertBefore() method.

				
					let books = document.getElementById("books");

					let book = document.createElement('option'); 
					book.setAttribute('value', 'The Lion, the Witch and the Wardrobe');

					books.insertBefore(book, books.firstChild);
				
			

Executing the above lines of script, the new <option/> element with the value The Lion, the Witch and the Wardrobe is inserted at the top of the list.

Now, instead of creating an element, setting its attributes or creating a text node and appending it to the element again, passing the whole element as a string as follows looks like a shorter alternative:
books.insertBefore("<option value='The Lion, the Witch and the Wardrobe'/>", books.firstChild);
except that it doesn't work.

If you wish to insert the new node anywhere in the list before the nth node of reference, use the childNodes[n] read-only property as shown below.

				
					books.insertBefore(book, books.childNodes[n]);
				
			

					
					<input list="books">

					<datalist id="books">
					  <option value="The Lion, the Witch and the Wardrobe">
					  <option value="Prince Caspian">
					  <option value="The Voyage of the Dawn Treader">
					  <option value="The Silver Chair">
					  <option value="The Horse and His Boy">
					  <option value="The Magician's Nephew">
					</datalist>
					
				

					
						let refBook = document.getElementById("books").lastChild;

						let book = document.createElement('option'); 
						book.setAttribute('value', 'The Last Battle');			

						refBook.parentNode.insertBefore(book, refBook.nextSibling);