jQuery Add New Elements, Attributes, Contents
It's simple to add new elements/content using jQuery.
Add New HTML Content
We will examine four ways used to add additional contents: jQuery
append()- Inserts content at the end of the components that have been chosen.prepend()- Adds content at the start of the items selected.after()- After the specified components, material is added.before()- Inserts contents before the items selected.
jQuery append() and prepend() Methods
The jQuery append() function adds content to the END of the specified HTML elements you've chosen.
The jQuery prepend() function of jQuery adds content AT THE BEGINNING of the specified HTML elements you've chosen.
Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
$("#p1").append(" Text added to <b>end</b> of the paragraph.");
});
$("#b2").click(function () {
$("#list1").append("<li>Item added to <b>end</b> of the list</li>");
});
$("#b3").click(function () {
$("#p1").prepend(" Text added to <b>start</b> of the paragraph. ");
});
$("#b4").click(function () {
$("#list1").prepend("<li>Item added to <b>start</b> of the list</li>");
});
});
</script>
</head>
<body>
<button id="b1">Append text</button>
<button id="b2">Append list items</button><br /><br />
<button id="b3">Prepend text</button>
<button id="b4">Prepend list items</button><br /><br />
<p id="p1">This is a paragraph.</p>
<ol id="list1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</body>
</html>
Output :-
This is a paragraph.
- List item 1
- List item 2
- List item 3
Related Links
jQuery after() and before() Methods
The after() function is used to inserts information AFTER the chosen HTML elements.
The before() function is used to adds information BEFORE the specified HTML elements.
Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b9").click(function () {
$("#img1").before("<p>This is a paragraph.</p>");
});
$("#b10").click(function () {
$("#img1").after("<p><br /><a href='https://www.simmanchith.com'>Visit simmanchith.com</a></p>");
});
});
</script>
</head>
<body>
<button id="b9">Add Text BEFORE Image</button><br /><br />
<button id="b10">Add Link AFTER Image</button><br /><br />
<img id="img1" src="../../favicon.png" alt="jQuery">
</body>
</html> Output :-
Add Several New Elements With append(), prepend(), after(), and before()
In the instances above, at the start/end of the specified HTML elements just a few text/HTML were added.
The append(), prepend(), after(), and
before() functions, on the other hand, can take an unlimited amount of additional elemnts as arguments.
Text/HTML (like in the previous instances), jQuery, or JavaScript code and DOM components can all be used to produce new elements.
Example :-
We build numerous new components in the following example. Elements are produced via text/HTML, jQuery and DOM.
Then with the function append() we add the additional elements to the document body.
var txt1 = "<p>Text.</p>"; // Create text with HTML
var txt2 = $("<p></p>").text("Text."); // Create text with jQuery
var txt3 = document.createElement("p");
txt3.innerHTML = "Text."; // Create text with DOM
$("body").append(txt1, txt2, txt3); // Append new elements
Note:- This also works for other functions like prepend(), after() and
before().
Related Links