Hi , Developers
Today we are going to study appendTo() and prependTo() functions to add and remove any particular section or area .
appendTo() function is to add any particular section. Mostly it usualy done by click event to detect the user interaction and then the target of the append location is given by using any of query selector .
prependTo() function is to add any particular section. Mostly it usualy done by click event to detect the user interaction and then the target of the prepend location is given by using any of query selector .
appendTo() -> add after the given location
prependTo() -> add before the given location
Syntax:
$(content).appendTo(selector);
In this example, Insert the span element at the end of each P tag when clicking on the button.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<span> Hello, ITSolutionGuides!!</span>").appendTo("p");
});
});
</script>
</head>
<body>
<h3>Jquery appendTo and prependTo Example - ITSolutionGuides</h3>
<p>This is a paragraph.</p>
<button>Insert span element at the end of each P tag</button>
</body>
</html>Syntax:
$(content).prependTo(selector);
In this example, Insert the span element at the beginning of the P tag when clicking on the button.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<span>Hello, ITSolutionGuides!! </span>").prependTo("p");
});
});
</script>
</head>
<body>
<h3>Jquery appendTo and prependTo Example - ITSolutionGuides</h3>
<p>This is a paragraph.</p>
<button>Insert span element at the beginning of P tag</button>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides