Examples of how to append a new li to ul using javascript:
Create a simple HTML page
Let's consider the following html page:
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><title></title></head><body><ul id="mylist"><li>item 1</li><li>item 2</li><li>item 3</li></ul><script></script></body></html>
The goal is to append 'item-4' to the ul with the id = "mylist" using javascript
Append li to ul using javascript
To do that, a solution is to select the ul element:
var ul = document.getElementById("mylist");
then create a new li element
var li = document.createElement("li");
and create a text for example
var text = document.createTextNode('item 4 (added using javascript)');
Attach the text to tje li element:
li.appendChild(text);
and finally append the li element to the ul elment:
ul.appendChild(li);
Solution:
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><title></title></head><body><ul id="mylist"><li>item 1</li><li>item 2</li><li>item 3</li></ul><script></script></body></html><script type="text/javascript">console.log('Append a new item to mylist');var ul = document.getElementById("mylist");var li = document.createElement("li");var text = document.createTextNode('item 4 (added using javascript)');li.appendChild(text);ul.appendChild(li);</script>
Another example append li with a link to ul
Another example with a link instead of text inside the li element:
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><title></title></head><body><ul id="mylist"><li>item 1</li><li>item 2</li><li>item 3</li></ul><script></script></body></html><script type="text/javascript">console.log('Append a new item to mylist');var ul = document.getElementById("mylist");var li = document.createElement("li");var a = document.createElement('a');var linkText = document.createTextNode('mylink');a.appendChild(linkText);a.href = '#'li.appendChild(a);ul.appendChild(li);</script>
Using innerHTML
Another solution using innerHTML to append a new li:
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><title></title></head><body><ul id="mylist"><li>item 1</li><li>item 2</li><li>item 3</li></ul><script>var ul = document.getElementById("mylist");document.querySelector("#mylist").innerHTML += `<li>item 4</li>`</script></body></html>
It is also possible to overwrite the ul entirely:
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="utf-8"><title></title></head><body><ul id="mylist"><li>item 1</li><li>item 2</li><li>item 3</li></ul><script>var ul = document.getElementById("mylist");document.querySelector("#mylist").innerHTML = `<li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li><li>item 5</li><li>item 6</li>`</script></body></html>
