How To Add A New LI To UL From Input Text Using Javascript
In This Javascript Tutorial we will See How To Insert A New <li> Element Into An Unordered List <ul> With Value From Text Input On Button Click using JS And Netbeans Editor .
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript: add LI to UL</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="text" id="txtVal">
<button onclick="addLi()">Add</button>
<ul id="list">
<li>1</li>
<li>22</li>
<li>50</li>
</ul>
<script>
function addLi()
{
var txtVal = document.getElementById('txtVal').value,
listNode = document.getElementById('list'),
liNode = document.createElement("LI"),
txtNode = document.createTextNode(txtVal);
liNode.appendChild(txtNode);
listNode.appendChild(liNode);
}
</script>
</body>
</html>
OUTPUT:
