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
Google Recaptcha Example In Laravel
Google Recaptcha Example In La...

 In this tutorial I will teach you about Google Recaptcha, Google Recaptcha is used for advanced risk analysis...

Read More

Jun-10-2020

Laravel 8 Socialite Login with Facebook Account
Laravel 8 Socialite Login with...

In this tutorial, we will learn laravel 8 socialite login with facebook account, as you all know currently many websites...

Read More

Mar-08-2021

How To Resize Image Before Upload In Laravel 10
How To Resize Image Before Upl...

In this article, we will see how to resize images before uploading in laravel 10. Here, we will learn about laravel 10&n...

Read More

Mar-29-2023

How To Use Google Recaptcha V2 In Laravel 9
How To Use Google Recaptcha V2...

In this article, we will see how to use google ReCaptcha v2 in laravel 9. Google ReCaptcha is used for advance...

Read More

Jun-14-2022