HTML DOM previousElementSibling Property

HTML Web Development Front End Technology

The HTML DOM previousElementSibling property returns the previous element in the same tree level of the specified element in an HTML document.

Syntax

Following is the syntax −

node.previousElementSibling

Example

Let us see an example of previousElementSibling property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.2rem;
   }
   .drop-down{
      width:50%;
      border:2px solid #fff;
      font-weight:bold;
      padding:8px;
   }
   ul{
      list-style-type: none;
      padding:0;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:50%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM previousElementSibling Property Demo</h1>
<p>Hi, My favourite subjects are:</p>
<ul>
<li>Physics</li>
<li id="chemistry">Chemistry</li>
<li>Maths</li>
<li>English</li>
</ul>
<button class="btn" onclick="showSibling()">Show Previous Sibling Of Chemistry</button>
<div class="show"></div>
<script>
   function showSibling() {
      var chemistry= document.querySelector("#chemistry");
      document.querySelector(".show").innerHTML=chemistry.previousElementSibling.innerHTML;
   }
</script>
</body>
</html>