ホームページ > ウェブフロントエンド > jsチュートリアル > LI 要素を OL list_javascript スキルに動的に追加する JavaScript メソッド

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

WBOY
リリース: 2016-05-16 16:08:19
オリジナル
1807 人が閲覧しました

この記事の例では、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 プログラミング設計に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート