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>