previousElementSibling Property in javascript

The javascript previousElementSibling Property works to display the previous node of the required or input node as a Node object. If the given node is the initial element of the list, then the nodes object displays null.

The previousElementSibling Property is used to get the element that came before specified in the same tree level. This Property is used for reading only on the web page.

Syntax

The following syntax gives an earlier sibling node of the list using previousElementSibling Property.

<script>
Let variable_name = node.previousElementSibling;
</script>

Return value

The Property displays a previous sibling node as an element.
If the previous sibling node is unavailable, then the Property gets a null.

Supported Browsers

The following list of the browsers that the previousElementSibling Property works with:

Google Chrome
Internet Explorer
Firefox
Opera
Safari
Edge

Examples

The following example displays the multiple values or nodes using the previousElementSibling Property.

Example 1

The basic previousElementSibling Property in the javascript example displays below. Here we can get the previous sibling node of the second node.

<!DOCTYPE html>
<html>
<body>
<h3> The previousElementSibling Property in javascript </h3>
<p> The Javascript previousElementSibling property is supported in IE8 and before versions. </p>
<p> Given Example list: </p>
<ul> <li id = "item1"> JAVA (First) </li>
<li id = "item2"> PHP (second) </li>
<li id = "item3"> PYTHON (Third) </li>
<li id = "item4"> PERL (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").previousElementSibling.innerHTML; 
    document.getElementById("demo_var_value").innerHTML = var_value;
}
</script>
</body>
</html>

Output

The image gets the earlier node of the required node using javascript Property.

Example 2

The basic previousElementSibling Property displays output in the console log function. Here we can get the previous sibling node of the third node.

<!DOCTYPE html>
<html>
<body>
<h3> The previousElementSibling Property in javascript </h3>
<p> The Javascript previousElementSibling property does not support IE8 and before versions.</p>
<p> Given Example list: </p>
<ul>
<li id = "item1"> JAVA (First) </li>
<li id = "item2"> PYTHON (second) </li>
<li id = "item3"> PHP (Third) </li>
<li id = "item4"> PERL (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_value3"></p>
<script>
function myclickFunction() {
var var_value3 = document.getElementById("item1").previousElementSibling;
document.getElementById("demo_var_value3").innerHTML = "The previousElementSibling node does not available : " +var_value3;
}
</script>
</body>
</html>

Output

The image gets the null value because of the first required node using the javascript Property.

Example 3

The basic previousElementSibling Property in javascript with condition example displays below. Here we can get the previous sibling nodes of the first, third, and last node simultaneously. We can use white space or a separate tag for the list item.

<!DOCTYPE html>
<html>
<body>
<h3> The previousElementSibling Property in javascript </h3>
<p> The Javascript previousElementSibling property does not support IE8 and before versions.</p>
<p> Given Example list: </p>
<ul>
<li id = "item1"> JAVA (First) </li>
<li id = "item2"> PYTHON (second) </li>
<li id = "item3"> PHP (Third) </li>
<li id = "item4"> PERL (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").previousElementSibling.innerHTML;
document.getElementById("demo_var_value").innerHTML = "the second nodes previous sibling node : "+var_value;
var var_value2 = document.getElementById("item4").previousElementSibling.innerHTML;
document.getElementById("demo_var_value2").innerHTML = "the last nodes previous sibling node : "+var_value2;
var var_value3 = document.getElementById("item1").previousElementSibling;
if(var_value3 == null){
document.getElementById("demo_var_value3").innerHTML = "The previousElementSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The previousElementSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>

Output

The image gets the multiple earlier node of the required node using javascript Property.

Example4

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 previousElementSibling Property in javascript </h3>
<p> The Javascript previousElementSibling property does not support IE8 and before versions. </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").previousElementSibling.innerHTML;
document.getElementById("demo_var_value").innerHTML = "the second nodes previous sibling node : "+var_value;
var var_value3 = document.getElementById("item1").previousElementSibling;
if(var_value3 == null){
document.getElementById("demo_var_value3").innerHTML = "The previousElementSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The previousElementSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>

Output

The image gets the multiple earlier node of the required node with a list tag.

Conclusion

The javascript previousElementSibling element displays the previous value of the list without whitespace. The list data, hash data, and other multiple information operate, control, and display using previousElementSibling Property.

Next TopicBase64 Decoding In JavaScript

← prev next →