In this article we will see jquery appendTo() and prependTo example. The appendTo() method inserts HTML elements at the end of the selected elements. The prependTo() method inserts HTML elements at the beginning of the selected elements. The .append()
and .appendTo()
methods perform the same task. The major difference is in the syntax. In .prepend()
and .prependTo()
methods perform the same task. The major difference is in the syntax.
The
.append() method selector expression preceding the method is the container into which the content is inserted. With .appendTo()
, on the other hand, the content precedes the method, either as a selector expression or as markup and it is inserted into the target container.
The
.prepend() methos selector expression preceding the method is the container into which the content is inserted. With .prependTo()
, on the other hand, the content precedes the method, either as a selector expression or as markup. and it is inserted into the target container.
Syntax :
$(content).appendTo(selector);
In this example, Insert span element at the end of each P tag when click on 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, Websolutionstuff !!</span>").appendTo("p");
});
});
</script>
</head>
<body>
<h3>Jquery appendTo and prependTo Example - Websolutionstuff</h3>
<p>This is a paragraph.</p>
<button>Insert span element at the end of each P tag</button>
</body>
</html>
Output :
Syntax :
$(content).prependTo(selector);
In this example,Insert span element at the beginning of P tag when click on 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, Websolutionstuff !! </span>").prependTo("p");
});
});
</script>
</head>
<body>
<h3>Jquery appendTo and prependTo Example - Websolutionstuff</h3>
<p>This is a paragraph.</p>
<button>Insert span element at the beginning of P tag</button>
</body>
</html>
You might also like :
In this article, we will see how to count days excluding weekends and holidays in laravel 9. Here, we will learn to...
Jan-24-2023
In this article, we will see the laravel 9 crud with an image upload example. Here, we will learn how to image upload wi...
Dec-09-2022
Hey everyone! Ever wondered how to make your Laravel emails look sleek and professional? In this guide, I'll walk yo...
Dec-04-2023
In this article, we will see how to crop images before uploading using the croppie plugin. any times we have requir...
Aug-15-2020