Updated April 19, 2023
Introduction to jQuery prependTo
jQuery prependTo() is the default method and it is used to insert the specified html data contents as the initial type. It defines as the child of that element type in the jQuery datas the content precedes the method, contents are htmlString, Element, Text, Array these are some html contents will apply for the method also the function as the argument parameter for the method. The function may be of integer or numbers, string format as applicable same in the html contents but all needs to be the jQuery object for placing the elements at the matched position in the set.
Syntax:
In jQuery library has a lot of default methods for handling the UI in a more sophisticated and user-friendly nature. The prependTo() is one of the default methods for inserting the datas on the html contents which is already created on the page.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"/>
<script>
$(document).ready(function(){
$("htmlelementID").click(function(){
$("").prependTo("htmlelements");
});
});
</script>
</head>
<body>
---some html UI elements depends on the requirement---
</body>
</html>The above code is the basic syntax for utilizing the prependTo() method on the web page. We can create html tags depends upon the requirement and this will be used on the method if it requires.
How prependTo function work in jQuery?
The prependTo() method is mainly used to insert the html elements which is already created in the tags like <p>, <span>, etc. That element value is matched and set to the beginning position of the html specified content as the initial child of each html element which is already used by the coder. By using the appendTo() method for to inserting the specified html contents as the last child of each element in the matched set values in the html page. Instead of that we use the prependTo() method more than ever we used the same functionality as appendTo() but it works slightly different manner that is the data contents is appended to the existing element on the web page. It shows the target element which is specified and mapped with only one of the elements as a target. Only one target element is used and appended with the existing element that is not be moved and cloned to the other elements, if the target element is more than once then the html content elements will be cloned. By using this method, the element also created the duplicated id attributes which are supposed to be a unique conditions. We can avoid the cloning set of elements with the specific id attributes or if supposed to be absolutely necessary for the ensure elements it might be cloned and developed the code using the class attribute identifiers.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Domain it’s a First Example</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<span>Have a Nice Day Users Thank you for using this site our development is progressing very soon to publish our data’s in the site</span>").prependTo("p");
});
});
</script>
<style>
first{
width: 425px;
min-height: 232px;
font-weight: bold;
padding:32px;
font-size: 28px;
border: 3px blue;
}
</style>
</head>
<body>
<div id="#first">
<p><marquee>Thank you for spending the time.</marquee></p>
<button >Please click the button to show our site status</button>
</div>
</body>
</html>Output:
In the above example, we used the prependTo() method for adding or append the contents with the same line of the page. It’s a basic example of the usage of the prependTo() method on the jQuery library.
Example #2
Code:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).prependTo("#second");
});
});
$(document).ready(function() {
$("button").click(function(){
$("<span>Have a Nice Day Users Thank you for using this site our development is completing 50 % very soon to complete the site with user-prospective and publish our data’s in the site</span>").prependTo("p");
});
});
</script>
<style>
.div{ margin:13px;padding:17px; border:3px solid blue; width:67px;}
</style>
</head>
<body>
<p>Welcome to My Domain it’s a second example:</p>
<p id = "second"> Have a Nice Day users </p>
<hr />
<div class = "div" style = "background-color:yellow;"></div>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:violet;"></div>
<div class = "div" style = "background-color:pink;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
<div class = "div" style = "background-color:orange;"></div>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:navy;"></div>
<marquee>Thank you for spenting the time.</marquee>
<button >Please click the button to show our site status</button>
</body>
</html>Output:
In Second Example we used some color rectangular boxes and adds the html tags additionally on the site. Once we perform the prependTo() method the data are appended and segregated with the single page context.
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<title> Welcome to My Domain it’s a third example </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<img src=E:\\website.jpg alt=website.jpg width=52 height=73>").prependTo("p");
});
});
$(document).ready(function(){
$("#eg").click(function(){
$("<img src=E:\\jpg.jpg alt=jpg.jpg width=52 height=73>").prependTo("#second");
});
});
</script>
</head>
<body>
<button>Please click the button to insert the image on the web page</button>
<button id="eg">Please click the button to merge the first image and additionally add the second image on the web page</button>
<p>Its a First Image.</p>
<p id="second">Its a second Image</p>
</body>
</html>Output:
In the final example, we used the <img> attribute for adding the images to the application. Once we click the first button the image is added with the text. We created two separate buttons for the first and second images. The first image is placed on using the first position of the application and the second image is placed using the second position of the application. But when we click the second button it adds the second image and also the first image is additionally added on the screen.
Conclusion
In jQuery prependTo() method is one of the default methods for appending or merging the data wherever it requires on the application. Moreover, it requires additional parameters for selecting and inserting the contents into it. By using the selector parameter, it specifies the html elements to prepend the contents on the application.
Recommended Articles
This is a guide to jQuery prependTo. Here we discuss the Introduction, How prependTo function work in jQuery? and examples with code implementation. You may also have a look at the following articles to learn more –
