JavaScript method to dynamically add LI elements to OL list_javascript skills

The example in this article describes the method of dynamically adding LI elements to the OL list using JavaScript. Share it with everyone for your reference. The specific analysis is as follows:

JavaScript method to dynamically add LI elements to the OL list. The following JS code will dynamically add an LI element to the OL list every time the button is clicked

<script type="text/javascript">
function addItem() {
 var myitem = document.getElementById("ItemToAdd").value;
 var mylistItems = document.getElementById("mylist");
 var newP = document.createElement("li");
 var textNode = document.createTextNode(myitem);
 newP.appendChild(textNode);
 document.getElementById("mylist").appendChild(newP);
 return false;
}
</script>
<form onsubmit="return addItem()" action="#">
<span>Grocery Items:</span>
<input type="text" id="ItemToAdd" value="Milk" />
<input type="button" value="Add" onclick="addItem()" />
</form>
<span>Grocery List:</span>
<ol id="mylist"></ol>

I hope this article will be helpful to everyone’s JavaScript programming design.