LI 要素を OL list_javascript スキルに動的に追加する JavaScript メソッド

この記事の例では、JavaScript を使用して LI 要素を OL リストに動的に追加する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

OL リストに LI 要素を動的に追加する JavaScript メソッド。次の JS コードは、ボタンがクリックされるたびに LI 要素を OL リストに動的に追加します。

<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>

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。