In this tutorial we will see how to Add HTML Element After Selected Element Using JQuery. The JQuery Code and HTML Code is given below.
Table of Contents
HTML Code
HTML Code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add HTML Element After Selected Element Using JQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>Adding Heading After Me.</p>
<button>Add After</button>
</body>
</html>
JQuery Code
JQuery Code is given below. In this code JQuery append() method is used to add HTML Element.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").append("<h1>This is a heading</h1>");
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on how to Add HTML Element After Selected Element Using JQuery.