jQuery Add Elements: append, prepend, after, before

jQuery can create and insert new HTML elements in the page. There are four main methods, depending on the position.

Method	Adds the content
append()	At the end, inside the selected element
prepend()	At the start, inside the selected element
after()	Right after the selected element (outside)
before()	Right before the selected element (outside)

<ul id="list">
  <li>Two</li>
</ul>

$('#list').append('<li>Three (append)</li>');
$('#list').prepend('<li>One (prepend)</li>');
$('#list').after('<p>After the list</p>');
$('#list').before('<p>Before the list</p>');

Create elements

You can pass an HTML string, a DOM element or a jQuery object. A safe and clear way is to create the element with jQuery and set its content:

<ul id="list"></ul>

var $li = $('<li></li>')
  .text('New item')
  .addClass('item')
  .attr('data-id', 1);

$('#list').append($li);

Add many items from an array

<ul id="fruits"></ul>

var fruits = ['Apple', 'Banana', 'Mango'];

$.each(fruits, function (i, name) {
  $('<li>').text(name).appendTo('#fruits');
});

appendTo() works in the opposite way: you write the new element first, then the place where to put it. prependTo(), insertAfter() and insertBefore() are similar.

Add more than one thing at once

<div id="box"></div>

$('#box').append('<p>One</p>', '<p>Two</p>', $('<p>Three</p>'));
console.log($('#box p').length);

clone(): copy an element

<div id="template" class="card">Card</div>
<div id="area"></div>

$('#template').clone().attr('id', 'copy1').appendTo('#area');
$('#template').clone().attr('id', 'copy2').appendTo('#area');

Change the id of the copy, because two elements must not have the same id. clone(true) also copies the event handlers.

Wrap elements

<p>Text</p>

$('p').wrap('<div class="wrapper"></div>');

Performance tip

If you add many items, do not call append() inside a loop for each item on a big list, because each call changes the page. Build the HTML or the list of elements first, and add it with one append().

<ul id="big"></ul>

var items = [];
for (var i = 1; i <= 3; i++) {
  items.push($('<li>').text('Item ' + i));
}
$('#big').append(items);
console.log($('#big li').length);

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.