Updated April 15, 2023
Definition of jQuery insert
jQuery provides the different types of functionality to the user, in which that jQuery insert is one of the functionalities that is provided by the jQuery. Normally jQuery insert provides different methods that mean we can insert HTML content before a specified element or we can insert HTML content after the specified element as per user requirements. jQuery consists of different methods and with help of this method, we can perform different operations as per user requirements. So here we listed some methods such as append(), HTML(), text(), before(), after(), wrap() and prepend(). We can use any method and perform any operations.
Methods of jQuery insert
Now let’s see the different methods of jQuery insert as follows
1. insertAfter()
The insertAfter() is an inbuilt strategy in jQuery that is utilized to embed some HTML content after a predetermined component. The HTML content will be embedded after every event of the predetermined component.
Syntax
$(specified html content).insertAfter(specified target)Explanation
In the above example, we use different two type’s parameters as follows.
- specified HTML content means actual content that we need to insert after the required content.
- specified target means endpoint of HTML page or in other word, we can say that after which content we need to insert.
2. insert prepend()
The prepend() strategy is an inbuilt technique in jQuery which is utilized to embed a predetermined substance toward the start of the chosen component.
- Boundaries: These strategies acknowledge two boundaries as referenced above and portrayed underneath:
- Content: It is the required boundary that is utilized to determine the substance that should be embedded.
- Function: It is the discretionary boundary that is utilized to determine the capacity to perform after the call.
3. Insert before()
The jQuery before() technique is utilized to embed content before the chose components. The before() and insertBefore() two techniques are utilized to perform the same assignment. The primary contrast between them is in linguistic structure and the situation of the substance and the objective.
4. Insert Wrap()
The wrap() strategy is an inbuilt technique in jQuery which is utilized to fold the predefined component over the chosen component.
- Boundaries: This strategy acknowledges two boundaries as referenced above and portrayed beneath:
- Component: It is the required boundary that is utilized to determine the component to fold over the chosen components.
- Function: It is the discretionary boundary that is utilized to determine the capacity which returns the wrapping component.
5. Insert text()
This strategy is utilized to set or return the text content of the component. While setting the substance, it overwrites the substance of the multitude of coordinated components. The returned content of text method() is utilized to return the text content of every coordinated component.
6. Inserthtml()
jQuery HTML() technique is utilized to change the whole substance of the chosen components. It replaces the chosen component content with a new substance.
The main technique signature has no contention, so it simply returns the HTML inside that component. The leftover two marks take a solitary contention: for example, a string or a capacity that profits a string
7. insert append()
Basically, the append() technique is utilized to embed a determined substance like the last kid (toward the finish of) the chosen components in the jQuery assortment.
Syntax
$(selector).append(specified web content, required function())The append() and appendTo() techniques are utilized to play out a similar errand.
- Boundaries: This technique acknowledges two boundaries as referenced above and depicted underneath:
- Content: It is a required boundary and is used to indicate the substance which is to be embedded toward the finish of chosen components. The conceivable worth of substance is HTML components, jQuery items, and DOM components.
- Function(index, HTML): It is a discretionary boundary and is used to indicate the capacity that will return the substance to be embedded.
1. Index: It is utilized to return the record position of the component.
2. Html: It is utilized to return the current HTML of the chose component.
Examples
Now let’s see the different examples of insert append() for better understanding as follows.
<!DOCTYPE html>
<html>
<head>
<title>
Welcome in jQuery append () method
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Script to append content -->
<script>
$(document).ready(function(){
$("#bttn1").click(function(){
$("p").append(" <b>Welcome in insertapend</b></b>.");
});
$("#bttn2").click(function(){
$("ol").append("<li>New Content addedd</li>");
});
});
</script>
</head>
<body>
<h1 style="margin-left: 150px;">Language</h1>
<p>Welcome in JQuery</p>
<p>jQuery has wonderful scripting language</p>
<ol>
<li>Language 1</li>
<li>Language 2</li>
<li>Language 3</li>
</ol>
<button id="bttn1">Append Here</button>
<button id="bttn2">Append list item</button>
</body>
</html>Explanation
In the above example we try to implement the append() method of jQuery, here we simply write the HTML code for HTML content and we also added the jQuery script as shown. After that, we created two buttons to append the content whatever we want after the specified content as shown in the above code. In this example, we add the content at the end of the paragraph. The end result of the above program we illustrated by using the following screenshot as follows.
Now click on the Append Here button that is the first button. After clicking on the button result is shown in the following screenshot as follows.
Now click on the second button, after clicking on the second button the end result is shown in the following screenshot as follows.
So in this way, we can add more content as per requirement.
Now let’s see one example of append method() as follows.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append method() demo</title>
<style>
#dm {
background: rgb(134, 134, 123);
}
</style>
<script src="https://code.jQuery.com/jQuery-3.5.0.js"></script>
</head>
<body>
<span>Welcome in jQuery programming Language </span>
<div id="dm">Hi Read line </div>
<script>
$( "span" ).appendTo( "#dm" );
</script>
</body>
</html>Explanation
In the above example, we try to append the content by using id as shown, here we append Hi Read line content. The end result of the above program we illustrated by using the following screenshot as follows.
So in this way, we can perform the different operations as per the requirement by using the insert append() method.
Conclusion
We hope from this article you learn more about the jQuery insert. From the above article, we have taken in the essential idea of the jQuery insert and we also see the representation and example of jQuery insert. From this article, we learned how and when we use the jQuery insert.
Recommended Articles
This is a guide to jQuery insert. Here we discuss the definition, overview, examples with code implementation. You may also have a look at the following articles to learn more –
