Add an item to an HTML list with JavaScript/jQuery

This post will discuss how to add an item to an ordered or unordered list in HTML in JavaScript and jQuery.

1. Using jQuery

With jQuery, you can create a new <li> element and add it to an existing <ol> or <ul> element using the .append() or the .prepend() method.

The .append() method inserts the specified content at the end of the matched elements, while the .prepend() method inserts it at the beginning.

jQuery

$(document).ready(function() {

$("ul").append($("<li>").html("Scooter"));

});

HTML

<ul>

<li>Cycle</li>

</ul>

Edit in JSFiddle

The code can be shortened to:

jQuery

$(document).ready(function() {

$("ul").append('<li>Scooter</li>');

});

HTML

<ul>

<li>Cycle</li>

</ul>

Edit in JSFiddle

Instead of .append() method, you can also use the .after() or .before() method to insert the specified content after or before a specified list element, respectively.

jQuery

$(document).ready(function() {

$("ul li:last").before('<li>Scooter</li>');

});

HTML

<ul>

<li>Cycle</li>

</ul>

Edit in JSFiddle

You can also use the .appendTo()/.prependTo() method, which is similar to the .append()/.prepend() method but has different syntax.

jQuery

$(document).ready(function() {

$("<li>")

.html('Scooter')

.appendTo('ul');

});

HTML

<ul>

<li>Cycle</li>

</ul>

Edit in JSFiddle

2. Using JavaScript

In pure JavaScript, you can create a <li> element using the createElement() method, and then append it to the list with Node.appendChild() method.

JS

var node = document.createElement('li');

node.appendChild(document.createTextNode('Scooter'));

document.querySelector('ul').appendChild(node);

HTML

<ul>

<li>Cycle</li>

</ul>

Edit in JSFiddle

That’s all about adding an item to an HTML list in JavaScript and jQuery.

Add an item to an HTML list with JavaScript/jQuery

1. Using jQuery

jQuery

HTML

jQuery

HTML

jQuery

HTML

jQuery

HTML

2. Using JavaScript

JS

HTML

Share this: