Crash Course On jQuery - Appending and Prepending Elements

Example of how to append and prepend elements in jQuery.

by Tony Le

HTML

<!-- WRAPPER -->
<div id="wrapper">
  <button type="button" id="append-btn">Append</button>
  <button type="button" id="prepend-btn">Prepend</button>
  <ul>
    <li>Hey look, I'm a single li element!</li>
  </ul>
</div>
<!-- WRAPPER END -->

CSS

/* OUR INITIAL STYLE */

body {
  background-color: #fff;
  color: #000;
}

JavaScript

// if the append button is clicked on
$('#append-btn').on('click', function(){
	// append an element into the ul element
  $('ul').append('<li>Time to append!</li>');
});

// if the prepend button is clicked on
$('#prepend-btn').on('click', function(){
	// prepend an element into the ul element
  $('ul').prepend('<li>Time to prepend!</li>');
});