Jquery appendTo And prependTo Example

Websolutionstuff | Dec-13-2021 | Categories : jQuery

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.

Example : appendTo() Method

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 : 

jquery_appendto_example

 

 

Example : prependTo() Method

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 :

Recommended Post
Featured Post
How To Store JSON Data In Database Laravel 9
How To Store JSON Data In Data...

In this article, we will see how to store JSON data in the database laravel 9. Laravel 9 stores JSON data in M...

Read More

Sep-28-2022

How To Remove Column From Table In Laravel 10 Migration
How To Remove Column From Tabl...

In this article, we will see how to remove columns from a table in laravel 10 migration. Here, we will learn about...

Read More

Apr-26-2023

Laravel 9 Ajax File Upload With Progress Bar
Laravel 9 Ajax File Upload Wit...

In this article, we will see the laravel 9 ajax file upload with a progress bar. we will learn how to file upload using...

Read More

Nov-15-2022

Bootstrap Daterangepicker Example
Bootstrap Daterangepicker Exam...

In this small tutorial i will show you how to implement bootstrap daterangepicker example, bootstrap date rang...

Read More

May-17-2021