【JavaScript】リストの要素を追加、削除する
DOMの追加
ボタンを押下すると、リスト内に要素を追加したり、削除したりできる。
■HTML
|
1 2 3 |
<button onclick="insetItem()">insert</button> <button onclick="removeItem()">delete</button> <ol id="sample_container"></ol> |
■JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script> //insertボタン押下時に実行 function insetItem() { var container = document.getElementById("sample_container");//id="sample_container"の要素を取得 var item = document.createElement("li");//li要素を作成 item.textContent = "hello";//作成した要素のtextContentプロパティを編集 container.appendChild(item);//sample_container要素に追加 } //deleteボタン押下時に実行 function removeItem() { var container = document.getElementById("sample_container"); var item = container.lastChild;//sample_container要素から削除 if (item) { container.removeChild(item); } else { window.confirm("削除する要素が存在しません。"); return; } } </script> |
 |
