Welche Möglichkeiten gibt es, Knoten in Javascript zu erstellen?

Methoden zum Erstellen von Knoten in JavaScript: 1. Die Methode createElement() kann Elementknoten erstellen. 2. Die Methode createTextNode() kann Textknoten erstellen. 3. Die Methode createAttribute() kann Attributknoten erstellen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Methoden zum Erstellen von Knoten in Javascript

1. createElement()-Methode: Elementknoten erstellen

Verwenden Sie die createElement()-Methode des Dokumentobjekts, um einen neuen Elementknoten basierend auf dem angegebenen Labelnamen zu erstellen durch den Parameter und gibt einen Verweis auf das neu erstellte Element zurück. Die Verwendung ist wie folgt:

var element = document.getElement("tagName");

Unter diesen stellt element die Referenz des neuen Elements dar, und createElement() ist eine Methode des Dokumentobjekts. Diese Methode verfügt nur über einen Parameter, der zur Angabe des Tag-Namens des verwendet wird erstelltes Element.

【Beispiel 1】Der folgende Code erstellt eine Absatzmarke p im aktuellen Dokument und speichert sie in der Variablen p. Da diese Variable einen Elementknoten darstellt, ist ihr Attributwert „nodeType“ gleich 1 und ihr Attributwert „nodeName“ gleich p.

var p = document.createElement("p");  //创建段落元素
var info = "nodeName:" + p.nodeName;  //获取元素名称
info += ", nodeType:" + p.nodeType;  //获取元素类型，如果为1则表示元素节点
console.log(info);

Neue Elemente, die mit der Methode createElement() erstellt wurden, werden nicht automatisch zum Dokument hinzugefügt. Wenn Sie dieses Element zum Dokument hinzufügen möchten, müssen Sie außerdem die Methoden appendChild(), insertBefore() oder replaceChild() verwenden.

【Beispiel 2】Der folgende Code zeigt, wie das neu erstellte p-Element zum body-Element hinzugefügt wird. Wenn ein Element zum Dokumentenbaum hinzugefügt wird, wird es sofort angezeigt.

var p = document.createElement("p");  //创建段落元素
document.body.appendChild(p);  //增加段落元素到body元素下

2. Methode createTextNode(): Textknoten erstellen

Verwenden Sie die Methode createTextNode() des Dokumentobjekts, um einen Textknoten zu erstellen. Die Verwendung ist wie folgt:

document.createTextNode(data)

• Die Parameterdaten stellen eine Zeichenfolge dar.

Beispiel

Das folgende Beispiel erstellt ein neues div-Element, setzt seinen Klassenwert auf rot und fügt es dann dem Dokument hinzu.

var element = document.createElement("div");
element.className = "red";
document.body.appendChild(element);

Aufgrund von DOM-Operationen und anderen Gründen enthält ein Textknoten möglicherweise keinen Text, oder es können zwei Textknoten nacheinander erscheinen. Um diese Situation zu vermeiden, wird im Allgemeinen die Methode normalize() für das übergeordnete Element aufgerufen, um leere Textknoten zu löschen und benachbarte Textknoten zusammenzuführen.

3. Methode createAttribute(): Attributknoten erstellen

Verwenden Sie die Methode createAttribute() des Dokumentobjekts, um Attributknoten zu erstellen:

document.createAttribute(name)

Der Parametername stellt den Namen des neuen dar erstelltes Attribut.

Beispiel 1

Das folgende Beispiel erstellt einen Attributknoten mit dem Namen align und value center, legt dann das Attribut align für die Beschriftung

<div id="box">document.createAttribute(name)</div>
<script>
    var element = document.getElementById("box");
    var attr = document.createAttribute("align");
    attr.value = "center";
    element.setAttributeNode(attr);
    console.log(element.attributes["align"].value);  //"center"
    console.log(element.getAttributeNode("align").value);  //"center"
    console.log(element.getAttribute("align"));  //"center"
</script>

<div id="div1" title="div"></div>

divElement.attributes = {
    id : "div1",
    class : "style1",
    lang : "en",
    title : "div"
}

<img id="img1" src="" />
<script>
    var img = document.getElementById("img1");
    img.setAttribute("src", "http://www.w3.org");  //HTML 属性
    img.src = "http://www.w3.org";  //JavaScript 属性
</script>