jQuery - Add Elements
Using jQuery makes it simple to include fresh elements or content in your webpage.
Add New HTML Content
We're going to explore four jQuery functions that help us insert fresh content into a web page:
append() - Inserts content at the end of the selected elementsprepend() - Inserts content at the beginning of the selected elementsafter() - Inserts content after the selected elementsbefore() - Inserts content before the selected elements
jQuery append() Method
The jQuery append() method adds stuff to the BOTTOM of the chosen parts of a webpage.
jQuery prepend() Method
The jQuery method prepend() adds content right at the beginning of the selected HTML elements.
Add Several New Elements With append() and prepend()
In the two examples provided earlier, we've simply added text or HTML content at the start or end of the chosen HTML elements.
In the case of the append() and prepend() methods, you can add as many new elements as you want. These new elements can be made using text/HTML, jQuery, or JavaScript code and DOM elements, like our earlier examples.
In this example, we make some new things. We create these things using text/HTML, jQuery, and JavaScript/DOM. After that, we add these new things to the text using the append() method (we could have used prepend() as well).
jQuery after() and before() Methods
The jQuery after() function adds stuff right after the chosen parts of a webpage.
The jQuery before() function adds stuff in front of the chosen parts of a webpage.
Add Several New Elements With after() and before()
Additionally, the after() and before() methods can accept a limitless amount of new elements as inputs. New elements can be made using text/HTML, jQuery, JavaScript code, and DOM elements, like the example shown before.
In this example, we make different new elements using text/HTML, jQuery, and JavaScript/DOM. After that, we add these new elements to the text using the after() method (you could also use before() for the same result):
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("p").append(" <b> Appended text </b>.");
}); $("#btn2").click(function() {
$("ol").append(" <li> Appended item </li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("p").prepend(" <b> Prepended text </b>. ");
}); $("#btn2").click(function() {
$("ol").prepend(" <li> Prepended item </li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
function appendText() {
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
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button onclick="appendText()">Append text</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$("img").before(" <b> Before </b>");
}); $("#btn2").click(function() {
$("img").after(" <i> After </i>");
});
});
</script>
</head>
<body>
<img src="/assets/files/plant.png" alt="jQuery" width="100" height="140">
<br>
<br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
function afterText() {
var txt1 = "<b>I</b>"; // Create element with HTML
var txt2 = $("<i></i>").text("love")[0]; // Create with jQuery and convert to DOM element
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // Insert new elements after img
}
</script>
</head>
<body>
<img src="/assets/files/plant.png" alt="jQuery" width="100" height="140">
<p>Click the button to insert text after the image.</p>
<button onclick="afterText()">Insert after</button>
</body>
</html>
HTML
CSS
Javascript
Jquery