Heim > Artikel > Web-Frontend > So fügen Sie Elemente in JavaScript hinzu und löschen sie
So fügen Sie Elemente in JavaScript hinzu und löschen sie
- 醉折花枝作酒筹Original
- 2021-04-08 15:46:063644Durchsuche
So fügen Sie Elemente in JS hinzu und löschen sie: 1. Verwenden Sie „appendChild(„element name“)“, um Elemente hinzuzufügen. 2. Verwenden Sie „insertBefore(element name, where to add the element)“, um Elemente an einer beliebigen Position hinzuzufügen; 3. Verwenden Sie „removeChild(„element name“)“, um ein Element zu entfernen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
So fügen Sie Elemente in JavaScript hinzu und löschen sie
Um ein Element hinzuzufügen, müssen Sie zuerst ein Element erstellen. Wenn Sie Text in das neu hinzugefügte Element schreiben möchten, müssen Sie auch einen Textknoten erstellen Fügen Sie den Textknoten hinzu. Der Wert wird in das neu hinzugefügte Element eingefügt.
(1) createElement("Elementname"): Diese Methode kann ein neues Element erstellen. Beispiel: createElement("p") bedeutet, dass ein p-Tag (Element/Absatz) erstellt wird.
(2) createTextNode("Text Content"): Diese Methode kann einen Textknoten erstellen. Beispiel: createTextNode("Ich bin neuer Inhalt") bedeutet, dass ein Textknoten mit dem Wert "Ich bin neuer Inhalt" erstellt wird.
(3) appendChild("Element Name"): Ein neues Element hinzufügen. Beispiel: ul.appendChild("li") bedeutet das Hinzufügen eines li-Elements zu ul.
(4) removeChild("Element Name"): Ein Element löschen. Die Verwendung ist entgegengesetzt zu (3).
Das folgende Beispiel fügt das li-Element dynamisch zu ul hinzu und fügt es jedes Mal vor dem ursprünglichen li hinzu.
<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>Hinweis: Wenn Sie möchten, dass jedes neu hinzugefügte Li vor dem ursprünglichen Li steht, müssen Sie die Methode insertBefore() verwenden. insertBefore() 方法了。
insertBefore()里面有两个参数值，第一个参数值为你要添加的元素名称，第二个参数值为要在哪里添加的元素的名称（值可以为 null），当为null时，效果就和appendChild()
insertBefore() Es enthält zwei Parameterwerte. Der erste Parameterwert ist der Name des Elements, das Sie hinzufügen möchten, und der zweite Parameterwert ist der Name des Elements, dem Sie hinzufügen möchten Wenn Sie es hinzufügen möchten (der Wert kann null sein), ist der Effekt derselbe wie bei appendChild(), wenn er null ist. Zum Beispiel möchte ich im obigen Beispiel, dass das Element li, das jedes Mal hinzugefügt wird, im Vordergrund steht. Dann müssen Sie nur noch den vierten Schritt ändern:var Li=UL.getElementsByTagName("li");
UL.insertBefore(li,Li[0]);li.appendChild(text);Das heißt, es gibt zwei Möglichkeiten, ein neues Element hinzuzufügen: ①appendChild(), ②insertBefore(); ein Element löschen: removeChild()Empfohlenes Lernen: javascript Video-Tutorial
🎜Das obige ist der detaillierte Inhalt vonSo fügen Sie Elemente in JavaScript hinzu und löschen sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!