Maison > Article > interface Web > Méthode JavaScript pour ajouter dynamiquement des éléments LI aux compétences OL list_javascript
L'exemple de cet article décrit la méthode d'ajout dynamique d'éléments LI à la liste OL à l'aide de JavaScript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :
Méthode JavaScript pour ajouter dynamiquement des éléments LI à la liste OL Le code JS suivant ajoutera dynamiquement un élément LI à la liste OL à chaque fois que vous cliquerez sur le bouton
<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>
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.