Wir wissen, dass appendChild und insertBefore beide die Funktion haben, Knoten einzufügen. Doch in der Anwendung gibt es noch einige Unterschiede zwischen den beiden.
Wenn wir beispielsweise einen untergeordneten Knoten P in das folgende Div einfügen möchten:
<div id="test"><p id="x1">Knoten</p><p>Knoten</p></div>
Wir können so schreiben (bitte fügen Sie einen weiteren Kommentar hinzu, wenn Sie eine bestimmte Situation testen):
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = „Dies ist ein Test“;
//Testen beginnt hier
//appendChild-Methode:
oTest.appendChild(newNode);
//insertBefore-Methode:
oTest.insertBefore(newNode,null);
</script>
Mit dem obigen Code können Sie testen, ob unter dem Knoten div ein neuer Knoten erstellt wird und dieser Knoten der letzte Knoten des div ist. (Um das DOM anzuzeigen, kann der IE es über das IE Developer Toolbar-Plug-in anzeigen und Firefox kann Firebug verwenden.)
Anhand dieses Beispiels können wir offensichtlich erkennen, dass sowohl appendChildhild als auch insertBefore Knoten einfügen können.
Im obigen Beispiel gibt es einen solchen Code: oTest.insertBefore(newNode,null). Hier hat insertBefore zwei Parameter, die festgelegt werden können. Der erste ist derselbe wie appendChild, aber der zweite ist einzigartig. Es kann nicht nur null sein, sondern auch:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = „Dies ist ein Test“;
oTest.insertBefore(newNode,refChild);
</script>
In diesem Beispiel wird ein neuer Knoten vor dem x1-Knoten eingefügt
Oder:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = „Dies ist ein Test“;
oTest.insertBefore(newNode,refChild.nextSibling);
</script>
In diesem Beispiel wird ein neuer Knoten vor dem nächsten Knoten des x1-Knotens eingefügt
Auch verfügbar für:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = „Dies ist ein Test“;
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>
In diesem Beispiel wird ein neuer Knoten vor dem ersten untergeordneten Knoten eingefügt. Sie können neue Knoten auch an anderen Stellen einfügen, indem Sie childNodes[0,1,...] ändern.
Da ersichtlich ist, dass die Methode insertBefore() einen neuen Knoten vor dem vorhandenen untergeordneten Knoten einfügen soll, kann in Beispiel 1 die Methode insertBefore() auch zum Einfügen eines neuen Knotens am Ende des untergeordneten Knotens verwendet werden Knotenliste. Durch die Kombination der beiden Situationen wird festgestellt, dass die Methode insertBefore() einen Knoten an jeder Position in der Liste der untergeordneten Knoten einfügen kann.
Aus diesen Beispielen:
Die appendChild()-Methode fügt einen neuen untergeordneten Knoten am Ende der Liste der untergeordneten Knoten eines Knotens hinzu.
Die Methode insertBefore() fügt einen neuen Knoten an einer beliebigen Position in der Liste der untergeordneten Knoten des Knotens ein.