jQuery prependTo() Method

Quiz

The prependTo() method in jQuery is used to insert specified content as the first child of each element in the set of matched elements. It prepends the specified content to the beginning of each target element.

If we want to append the HTML elements at the end of the selected target elements, we need to use the appendTo() method.

Syntax

Following is the syntax of prependTo() method in jQuery −

$(content).prependTo(selector)

Parameters

This method accepts the following parameters −

content: The HTML elements to be appended at the beginning of the target element(s).
selector: The target element(s) to which the content will be appended.

Note: If the content provided is already an existing element, it will be moved from its current position in the DOM and then inserted at the beginning of chosen target element(s).

Example 1

In the following example, we are using the prependTo() method to append a element at the beginning of the element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("<span><i> This is a newly appended span element.</i></span>").prependTo("p");
  })
});
</script>
</head>
<body>
<p>Paragraph element.</p>
<button>Click here!</button>
</body>
</html>

When we execute the above program and click on the button, the element will be appended at the beginning of element.

Example 2

In the below example, we are appending an existing element () at the beginning of the paragraph element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("span").prependTo("p");
  })
});
</script>
</head>
<body>
<p>Paragrapah element.</p>
<button>Click here!</button>
<span><i> This is a newly appended span element.</i></span>
</body>
</html>

As the provided content is already an existing element, it will be moved from its current position in the DOM and then inserted at the beginning of the (target element).

jquery_ref_html.htm

Print Page