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
Laravel 9 Vue JS CRUD Operation Example
Laravel 9 Vue JS CRUD Operatio...

In this article, we will see the laravel 9 vue js crud operation example. Here, we will learn how to create a vue 3...

Read More

Dec-07-2022

Laravel 9 Image Upload In Summernote Editor
Laravel 9 Image Upload In Summ...

In this article, we will see laravel 9 image upload in summernote editor. there are many editor available in l...

Read More

Mar-24-2022

Laravel 8 Order By Query Example
Laravel 8 Order By Query Examp...

In this example we will see laravel 8 order by query example. how to use order by in laravel 8.The orderBy met...

Read More

Dec-01-2021

How Generate PDF From HTML View In Laravel
How Generate PDF From HTML Vie...

In this example, I will teach you how to generate PDF files from an HTML view in laravel. For generating PDF files I wil...

Read More

Jun-01-2020