If you have noticed javascript prependchild doesnot exists which is opposite of appendChild. So in this tutorial we will see how to prepend new html element just before the first child of the parent element.
If you want to add new child element of the parent element what you generally do is, use the appendChild() method.
Lets make a structure of an element to make this more clear. lets construct the div with its parent and child elements :-
|
1 2 3 4 5 |
<div id="parentElement"> <div id="childElement1">1</div> <div id="childElement2">2</div> <div id="childElement3">3</div> </div> |
In avobe code if you want to append any child in the parentElement, you just have to do this :-
|
1 2 3 4 5 6 7 8 |
// First Create a new element var newElement = document.createElement("span"); // then save a parent element in a varibale var parentElement = document.getElementById("parentElement"); // Then just use the appendMethod() parentElement.appendChild(newElement); |
Its very easy and javascript have provided this method so that you can do it very easily by using its inbuilt method.
If you inspect element and check in elements section you should have <span> element as the bottom of parentElement as its childElement.
But, what if you want to append child just before the first child element of an parent element ? Well javascript haven’t provided any methods for it.
So we need to use the jQuery insertBefore() method. Lets see how :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//Create new element that you want to insert var newElement = document.createElement("span"); // Now get the parent element var parentElement = document.getElementById("parentElement"); //Getting the child of parents var ParentChilds = parentElement.childNodes; // Get the first child (In 0 index of childNodes we have the first child of an parent element) var firstchild = parentElement.childNodes[0]; // lets insert new node before first child of an parent element parentElement.insertBefore(newElement,firstchild); |
Now, again inspect element and check, we have successfully placed new element before first child element of the parent element.
If you want to view all the child nodes of an current parent element then you can use this code below to view and debug.
|
1 2 3 4 5 6 7 |
/* If you want to see all the child elements of parentElement then you do can do with the help of this code below */ var totalChilds = parentElement.querySelectorAll("*"); console.log(totalChilds); |
You have successfully placed the new element before the first child of parent element. Now, what if you can create a function for it like javascript and use it all over other place you want ?
Lets create a function for it so that you can use it across all the projects you want.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// First create the element you want var newElement = document.createElement("a"); // now the parent element where you want to insert var parentElement = document.getElementById("parentElement"); // Now the function you and copy it somwhere in your scripts as an library function prependChild(newElement,parentElement) { var firstchild = parentElement.childNodes[0]; parentElement.insertBefore(newElement,firstchild); } // Now you just have to call the function and pass the arguments and its done. prependChild(newElement,parentElement); |
This it, we have successfully created our own custom function to prepend the element using jQuery and javascript. If you think you have benefited from this tutorial be sure to like us on facebook.
Leave a Reply