PreviousSibling Property in Javascript

The previousSibling property serves to get the previous or earlier node of the given node as a Node object. If the given node is the first item in the list, then the node object shows null.

The previousSibling property displays the element that came before the one you specified on the same level of the tree. The property is used to display previousSibling node, and it needs to return the preceding sibling node as a text node, element node, or comment node. This property can be read only for the web page.

Note that the children's property works to get back all of an element's children. We can get the previous sibling node in the alert, console, and innerHTML function.

Syntax

The following syntax gives the previous sibling node of the list.

Return value

This property gives a node's previous sibling as an element.
This property gives a null if the previous sibling node does not available.

Note Don't put whitespace between two elements already close to each other, or the result will be "undefined."

Examples

The following example shows the output of the multiple values or nodes using previousSibling property.

Example 1

The basic previousSibling property in the javascript example shows below. Here we can get the previous sibling node of the second node.

<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property does not support IE8 and before versions. </p>
<p> Given Example list:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (fourth) </li></ul>
<p>Click the below button to get the previous sibling of the second node in the given list</p>
<button onclick="myclickFunction()"> Click Here </button>
<p id = "demo_var_value"></p>
<script>
function myclickFunction() {
    var var_value = document.getElementById("item2").previousSibling.innerHTML; 
    document.getElementById("demo_var_value").innerHTML = var_value;
}
</script>
</body>
</html>

Output

The image displays the previous sibling node's value as an output.

Example 2

The basic previousSibling property shows output in the console log function. Here we can get the previous sibling node of the third node.

<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property does not support white space in the list tag. </p>
<p> Given Example list:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (fourth) </li></ul>
<p> Click the below button to get previous in the console tab. </p>
<button onclick = "myclickFunction()"> Click Here </button>
<script>
function myclickFunction() {
    var var_value = document.getElementById("item3").previousSibling.innerHTML; 
console.log("The previousSibling Property in javascript ");
console.log(var_value);
}
</script>
</body>
</html>

Output

The image shows the previous sibling node's value as an output.

Example 3

The basic previousSibling property in javascript with condition example shows below. Here we can get the previous sibling node's available value. The property displays the list value if the previous sibling node is available. The property shows a null value if the previous sibling nodes are unavailable.

<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property does not support IE8 and before versions. </p>
<p> Given Example list:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (fourth) </li></ul>
<p>Click the below button to get the previous sibling of the second node in the given list</p>
<button onclick = "myclickFunction()"> Click Here </button>
<p id = "demo_var_value"></p>
<script>
function myclickFunction() {
    var var_value = document.getElementById("item1").previousSibling; 
console.log(var_value);
if(var_value == null){
    document.getElementById("demo_var_value").innerHTML = "The previousSibling node does not available : " +var_value;
}else{
document.getElementById("demo_var_value").innerHTML = var_value;
}
}
</script>
</body>
</html> 

Output

The image displays the previous sibling node's value as an output. The output is null because the previous sibling node is unavailable.

Example 4

The basic previousSibling property in javascript with condition example shows below. Here we can get the previous sibling node's available value if the list gives without space. The list tag place space then the data shows undefined.

<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property does not support IE8 and before versions. </p>
<p> Given Example list: </p>
<ul>
<li id = "item1"> HTML (First) </li>
<li id = "item2"> CSS (second) </li>
<li id = "item3"> Javascript (Third) </li>
<li id = "item4"> Jquery (fourth) </li>
</ul>
<p> Click the below button to get the previous sibling of the second node in the given list </p>
<button onclick = "myclickFunction()"> Click Here </button>
<p id = "demo_var_value"></p>
<script>
function myclickFunction() {
    var var_value = document.getElementById("item2").previousSibling.innerHTML; 
console.log(var_value);
document.getElementById("demo_var_value").innerHTML = "The previousSibling node shows syntax error : " +var_value;
}
</script>
</body>
</html>

Output

The image displays an undefined value (space in the list ) as an output.

Example 5

The basic previousSibling property in javascript with condition example shows below. Here we can get the previous sibling nodes of the first, third and last node simultaneously.

<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property gets available previous value.</p>
<p> Given Example list:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (fourth) </li></ul>
<p>Click the below button to get the previous sibling of the second node in the given list</p>
<button onclick="myclickFunction()"> Click Here </button>
<p id = "demo_var_value"></p>
<p id = "demo_var_value2"></p>
<p id = "demo_var_value3"></p>
<script>
function myclickFunction() {
    var var_value = document.getElementById("item2").previousSibling.innerHTML; 
    document.getElementById("demo_var_value").innerHTML = "the second nodes previous sibling node : "+var_value;
    var var_value2 = document.getElementById("item4").previousSibling.innerHTML; 
    document.getElementById("demo_var_value2").innerHTML = "the last nodes privious sibling node : "+var_value2;
    var var_value3 = document.getElementById("item1").previousSibling; 
   if(var_value3 == null){
    document.getElementById("demo_var_value3").innerHTML = "The previousSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The previousSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>

Output

The image displays the previous sibling node's value as an output. The output is null because the previous sibling node is unavailable.

Example 6

The previous sibling node property is used for all tags without whitespace. It displays data as a list but does not necessarily list tags.

<!DOCTYPE html>
<html>
<body>
<h3> The previousSibling Property in javascript </h3>
<p> The Javascript previousSibling property gets available previous value.</p>
<div><p id = "item1"> JavaTpoint </p><p id = "item2"> TutorialsandExample </p></div>
<button onclick="myclickFunction()"> Click Here </button>
<p id = "demo_var_value" style="color:red;"></p>
<p id = "demo_var_value2" style="color:orange;"></p>
<p id = "demo_var_value3" style="color:green;"></p>
<script>
function myclickFunction() {
    var var_value = document.getElementById("item2").previousSibling.innerHTML; 
    document.getElementById("demo_var_value").innerHTML = "the second nodes previous sibling node : "+var_value;
    var var_value3 = document.getElementById("item1").previousSibling; 
   if(var_value3 == null){
    document.getElementById("demo_var_value3").innerHTML = "The previousSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The previousSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>

Output

The image displays the previous sibling nodes of the second nodes.

Supported Browsers

Here is a list of the browsers that the previousSibling property works with:

Google Chrome version 1 and up
Edge 12 or higher and
Internet Explorer 5.5 or higher
Firefox 1 or higher
Opera 12.1 or higher
Safari 1 or higher

Conclusion

The previousSibling node finds the earlier or before node of the required node without whitespace in the list tag. It is a basic and required JavaScript function for the list type of data or array type of information.

Next TopicJavaScript sessionStorage

← prev next →