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 Downgrade PHP 8.2 to 8.1 in Ubuntu
How to Downgrade PHP 8.2 to 8....

Hey there, I recently found myself in a situation where I needed to downgrade my PHP version from 8.2 to 8.1 on my Ubunt...

Read More

Nov-01-2023

How To Get env Variable In Controller Or Blade File
How To Get env Variable In Con...

In this tutorial, I will give you information on how to get the .env variable in the controller or file. Many times we n...

Read More

Jul-26-2020

How to Increase max_input_vars in PHP Ubuntu
How to Increase max_input_vars...

Hey folks! If you've ever encountered issues with PHP hitting the max_input_vars limit, you're not alone. In thi...

Read More

Feb-02-2024

Drag and Drop File Upload Using Dropzone js in Laravel 9
Drag and Drop File Upload Usin...

In this article, we will see drag and drop file upload using dropzone js in laravel 9. Dropzone JS is an open-source lib...

Read More

Mar-19-2022