jquery append() and prepend()

jQuery append() method

The jQuery append() method to insert content at the end of the selected HTML elements.

$("ol").append("<li>New Item</li>");
<ol> <li>Itel 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

The above code will append an item to the list, meaning that the new item will be inserted as the last item.

run this source code Browser View
  1. Item 1
  2. Item 2
  3. Item 3
Full Source
<html> <head> <title>jQuery append() methos example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn").click(function(){ $("ol").append("<li>New Item</li>"); }); }); </script> </head> <body> <button id="btn">Append Item</button> <ol> <li>Itel 1</li> <li>Item 2</li> <li>Item 3</li> </ol> </body> </html>

jQuery prepend()

The jQuery prepend() method inserts specified content at the beginning of the selected elements.

$("ol").prepend("<li>New Item</li>");
<ol> <li>Itel 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
run this source code Browser View
  1. Itel 1
  2. Item 2
  3. Item 3

The above code will prepend an item to the list, meaning that the new item will be inserted at the beginning of the list.

Full Source
<html> <head> <title>jQuery prepend() method example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btn").click(function(){ $("ol").prepend("<li>New Item</li>"); }); }); </script> </head> <body> <button id="btn">Prepend</button> <ol> <li>Itel 1</li> <li>Item 2</li> <li>Item 3</li> </ol> </body> </html>