Methods used to add text for the selected element.
We can add the text in four different ways.
Appends content to the end of the selected element.
We have another method in this append() method
appendTo() - Appends the selected element to another element.
EDUCATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery appendTo() Method Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="destinationElement">
<p>Destination Element</p>
</div>
<script>
// Creating a new element
var newParagraph = $("<p>New Content</p>");
// Using appendTo() to add the new element to the destination element
newParagraph.appendTo("#destinationElement");
</script>
</body>
</html>
Prepends content to the beginning of the selected element
We have another method in this prepend() method
prependTo() - Prepends the selected element to another element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery prepend() and prependTo() Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="container">
<p>Existing content.</p>
</div>
<script>
// Using prepend() to add content at the beginning of the element
$("#container").prepend("<strong>Prepended Content</strong>");
// Creating a new element
var newParagraph = $("<p>Prepended using prependTo()</p>");
// Using prependTo() to add the new element to the container
newParagraph.prependTo("#container");
</script>
</body>
</html>
Inserts content after the selected element
We have another method in this after() method
insertAfter() - Inserts the selected element after another element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery after() and insertAfter() Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="targetElement">
<p>Existing content.</p>
</div>
<script>
// Using after() to add content after the element
$("#targetElement").after("<div><strong>Content After</strong></div>");
// Creating a new element
var newParagraph = $("<p>Inserted using insertAfter()</p>");
// Using insertAfter() to add the new element after the target element
newParagraph.insertAfter("#targetElement");
</script>
</body>
</html>
Inserts content before the selected element
We have another method in this before() method
beforeAfter() - Inserts the selected element before another element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery before() and insertBefore() Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div id="targetElement">
<p>Existing content.</p>
</div>
<script>
// Using before() to add content before the element
$("#targetElement").before("<div><strong>Content Before</strong></div>");
// Creating a new element
var newParagraph = $("<p>Inserted using insertBefore()</p>");
// Using insertBefore() to add the new element before the target element
newParagraph.insertBefore("#targetElement");
</script>
</body>
</html>
The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.
