Heim > Artikel > Web-Frontend > So entfernen und fügen Sie Elemente in Javascript hinzu
So entfernen und fügen Sie Elemente in Javascript hinzu
- 青灯夜游Original
- 2021-07-16 11:05:224847Durchsuche
In JavaScript können Sie die Anweisung „parent element object.appendChild(new element)“ oder „parent element object.insertBefore(new element, insert point)“ verwenden, um dem übergeordneten Element ein neues Element hinzuzufügen Die Anweisung „parent element object. removeChild(child element)“ löscht untergeordnete Elemente.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
Javascript Elemente löschen und hinzufügen
1. Elemente hinzufügen
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript添加元素</title>
<script type="text/javascript" >
window.onload = function(){
var box = document.getElementById("box"); //通过id属性值获得DIV
};
function addNode(){//在末尾插入新节点
var p = document.createElement("p"); //创建需要添加的元素节点
p.innerHTML = "段落三(添加的内容)";
box.appendChild(p); //将段落节点添加到box的子节点列表后面
}
function insertNode(){//在开头插入新节点
var h2 = document.createElement("h2"); // 创建一个H2元素节点
h2.innerHTML = "二级标题(插入的内容)";
var oP = document.getElementsByTagName("p")[0]; //获取第一个段落
box.insertBefore(h2,oP); //在第一个段落前面插入一个H2标题
}
</script>
</head>
<body>
<div id="box">
<p>段落一</p>
<p>段落二</p>
</div>
<a href="javascript:addNode()">在末尾插入新节点</a>
<a href="javascript:insertNode()">在开头插入新节点</a>
</body>
</html>Rendering:
Beschreibung: Die Methode
appendChild() kann am Ende der Liste der untergeordneten Knoten hinzugefügt werden des aktuellen neuen untergeordneten Knotens. Die Verwendung ist wie folgt:
appendChild(newchild)
Der Parameter newchild repräsentiert das neu hinzugefügte Knotenobjekt und gibt den neu hinzugefügten Knoten zurück. Die Methode
insertBefore() fügt einen neuen untergeordneten Knoten am Anfang der untergeordneten Knotenliste des aktuellen Knotens hinzu. Die Verwendung ist wie folgt:
insertBefore(newchild, refchild)
Der Parameter newchild stellt den neu eingefügten Knoten dar, und refchild stellt den Knoten dar, in den der neue Knoten eingefügt wird, und wird verwendet, um die benachbarte Position hinter dem eingefügten Knoten anzugeben.
Nachdem das Einfügen erfolgreich war, gibt diese Methode den neu eingefügten untergeordneten Knoten zurück.
document.createElement() wird aufgerufen, um einen Elementknoten zu erstellen.
2. Element löschen
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript删除元素</title>
<script type="text/javascript" >
function deleteNode(){//删除节点
var oP = document.getElementsByTagName("p")[0];//获取第一个段落
box.removeChild(oP);//删除第一个段落
}
</script>
</head>
<body>
<div id="box">
<p>段落一</p>
<p>段落二</p>
</div>
<a href="javascript:deleteNode()">删除节点</a>
</body>
</html>Rendering:
Beschreibung:
removeChild()-Methode kann einen untergeordneten Knoten auf dem übergeordneten Knoten löschen.
Syntax:
parentNode.removeChild(nodeName)
nodeName: der Name des aktuellen Knotens
parentNode: der übergeordnete Knoten des aktuellen Knotens
[Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]
Das obige ist der detaillierte Inhalt vonSo entfernen und fügen Sie Elemente in Javascript hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!