DEV Community 👩‍💻👨‍💻

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

Jquery Append And Prepend Example

In this article, We will see examples of the jquery append() and prepend() methods. The append() method inserts the specified content as the last child of each element in the jquery collection. The prepend() method inserts the specified content as the first child of each element in the jquery collection.

Using the append method you can append HTML, append text to div, append HTML in div, append a row to table tbody, append HTML after, or append HTML before.

Using prepend method you can jquery prepend before element, prepend HTML in div, append prepend before after, and prepend text to div using jquery.

Example: append()

In this example, append some HTML to the

tag and append li tag on list. It appends some text to the element on the button click event.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#append_text").click(function(){
    $("p").append(" <b>appended text in p tag</b>.");
  });
  $("#append_item").click(function(){
    $("ol").append("<li><b>Item Nth</b></li>");
  });
});
</script>
</head>
<body>
<h3>Jquery Append And Prepend Example - Techsolutionstuff</h3>
<p>This is a paragraph.</p>

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>

<button id="append_text">Append Text</button>
<button id="append_item">Append Item</button>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Example: prepend()

In this example prepend some HTML to the p tag and prepend li tag on list. It's prepend some text to the element on button click event.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#prepend_text").click(function(){
    $("p").prepend("<b>Prepended text in p tag</b>. ");
  });
  $("#prepend_item").click(function(){
    $("ol").prepend("<li><b>Prepended Item</b></li>");
  });
});
</script>
</head>
<body style="padding:20px;">
<h3>Jquery Append And Prepend Example - Techsolutionstuff</h3>
<p>This is a paragraph.</p>

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>

<button id="prepend_text">Prepend Text</button>
<button id="prepend_item">Prepend Item</button>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠