ホームページ > 記事 > ウェブフロントエンド > JavaScriptで要素を追加および削除する方法
JavaScriptで要素を追加および削除する方法
- 醉折花枝作酒筹オリジナル
- 2021-04-08 15:46:063686ブラウズ
JS で要素を追加および削除する方法: 1.「appendChild("要素名")」を使用して要素を追加します; 2.「insertBefore(要素名、要素を追加する場所)」を使用して追加しますどこでも要素; 3. 「removeChild("要素名")」を使用して要素を削除します。
このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript で要素を追加および削除する方法
要素を追加するには、まず要素を作成する必要があります。新しく追加された要素 テキストを入力するには、テキスト ノードを作成し、テキスト ノードの値を新しく追加された要素に挿入する必要があります。
(1) createElement("要素名"): このメソッドは新しい要素を作成できます。例: createElement("p") は、p タグ (要素/段落) が作成されることを意味します。
(2) createTextNode("Text Content"): このメソッドはテキスト ノードを作成できます。例: createTextNode("I am new content") は、値「I am new content」を持つテキスト ノードが作成されることを意味します。
(3) appendChild("要素名"): 新しい要素を追加します。例: ul.appendChild("li") は、li 要素を ul に追加することを意味します。
(4)removeChild("要素名"): 要素を削除します。使い方は(3)と逆になります。
次の例では、li 要素を ul に動的に追加し、毎回元の li の前に追加します。
<script>
window.οnlοad=function () {
var UL=document.getElementsByClassName('box')[0];
var btn=document.getElementsByTagName('button');
var index=1; //序号计数器
btn[0].οnclick=function () { //创建新节点，并添加新元素,新添加的元素总是在最前面
var li=document.createElement('li'), //创建li元素
content='我是第'+index+'个li'; //li元素的文本节点的内容
var text=document.createTextNode(content); //创建li元素的文本节点
index++; //每创建一个li计数就+1
var Li=UL.getElementsByTagName('li'); //获取页面中的li集合
UL.insertBefore(li,Li[0]),li.appendChild(text); //在页面中第一个li前面添加新的li标签
}
btn[1].οnclick=function () { //删除添加的元素
var li=document.getElementsByTagName('li')[0];
if(!index%2==0){
li.parentNode.removeChild(li);
}
}
}
</script>
</head>
<body>
<button>点击添加新的li元素</button>
<button>点击删除li元素</button>
<ul class="box">
</ul>
</body>注: 新しく追加した各 li を元の li の前に置きたい場合は、insertBefore() メソッドを使用する必要があります。
insertBefore()これには 2 つのパラメータ値があります。最初のパラメータ値は追加する要素の名前で、2 番目のパラメータ値は追加する要素の名前です。追加したい要素 (値は null にすることもできます)。null の場合、効果は appendChild() と同じです。
たとえば、上記の例では、毎回追加される要素 li を先頭にしたいとします。次に、変更する必要があるのは 4 番目のステップだけです:
var Li=UL.getElementsByTagName("li");
UL.insertBefore(li,Li[0]);li.appendChild(text);つまり、新しい要素を追加するには 2 つの方法があります: ①appendChild()、②insertBefore(); 要素を削除します:removeChild()
推奨学習: JavaScript ビデオ チュートリアル
以上がJavaScriptで要素を追加および削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。