jQuery Adding

Methods used to add text for the selected element.
We can add the text in four different ways.
  1. append() - Appends content to the end of the selected element
  2. prepend() - Prepends content to the beginning of the selected element
  3. after() - Inserts content after the selected element
  4. before() - Inserts content before the selected element

append() Method

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.

Example

<!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>

prepend() Method

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.

Example

<!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>

after() Method

Inserts content after the selected element
We have another method in this after() method
insertAfter() - Inserts the selected element after another element.

Example

<!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>

before() Method

Inserts content before the selected element
We have another method in this before() method
beforeAfter() - Inserts the selected element before another element.

Example

<!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>

Quick Recap - Topics Covered

jQuery Adding
Introduction and history of jQuery

Practice With Examples in Compilers

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.

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message