Add HTML Element Before Selected Element Using JQuery

In this tutorial we will see how to Add HTML Element Before Selected Element Using JQuery. The JQuery Code and HTML Code is given below.

HTML Code

HTML Code is given below.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add HTML Element Before Selected Element Using JQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <p>Adding Heading Before Me.</p>
    <button>Add Before</button>
</body> 
</html>

JQuery Code

JQuery Code is given below. In this code JQuery prepend() method is used to add HTML Element.

<script>
$(document).ready(function(){
$("button").click(function(){
$("p").prepend("<h1>This is a heading</h1>"); 
});
});
</script>

Video Tutorial

Watch video tutorial on how to Add HTML Element Before Selected Element Using JQuery.