Das DHTML-Objekt des IE bietet vier lesbare und beschreibbare Eigenschaften, um den Inhalt von Seitenelementen dynamisch zu manipulieren: innerText, äußererText, innerHTML, äußererHTML
Zwei Punkte sollten beachtet werden:
1. Die Werte der Eigenschaften innerText und äußererText werden als gewöhnlicher Text dargestellt. Selbst wenn es HTML-Tags enthält, wird es wahrheitsgetreu wiedergegeben, während innerHTML und äußereHTML den von der HTML-Engine analysierten Text darstellen, was den Leistungseffekt der HTML-Tags in den Attributen widerspiegeln kann.
2. Durch Zuweisen von Werten zu den Attributen „outerText“ und „outerHTML“ eines Objekts (d. h. durch Schreibvorgänge) wird das Objekt gelöscht.
Die Zuweisungsoperation der oben genannten vier Attribute ersetzt nur den Textinhalt des ursprünglichen Objekts. Wenn Sie an der relevanten Position des angegebenen Elements auf der Seite neuen Textinhalt hinzufügen möchten, müssen Sie die Methoden insertAdjacentHTML und insertAdjacentText verwenden. Das Formular ist wie folgt:
object.insertAdjacentText(sWhere, sText)
object.insertAdjacentHTML(sWhere, sText)
Darunter stellt sWhere die Position des eingefügten Texts relativ zum HTML-Tag dar. Es verfügt über die folgenden vier voreingestellten Werte:
beforeBegin, afterBegin, beforeEnd und afterEnd.
Bitte beachten Sie die folgenden Punkte, wenn Sie sie verwenden
. Diese beiden Methoden müssen verwendet werden, nachdem das gesamte Dokument geladen wurde, andernfalls tritt ein Fehler auf.
2. InsertAdjacentText kann nur normalen Text einfügen, und InsertAdjacentHTML kann Text im HTML-Format 3 einfügen
. Wenn Sie InsertAdjacentHTML zum Einfügen eines Skripts verwenden, müssen Sie das Defer-Attribut im Skriptelement verwenden, da sonst während der Skriptausführung
4 ein Laufzeitfehler auftritt. Nachdem InsertAdjacentHTML ein HTML-Element eingefügt hat, werden alle und andere mögliche Elementsammlungen automatisch aktualisiert, um dynamische Änderungen widerzuspiegeln. Beispielsweise ändert sich das sourceIndex-Attribut nachfolgender Elemente auf der Seite.
5. Diese Methode kann zu Laufzeitfehlern führen, wenn ungültigen HTML-Tags die Attribute InsertHTML/outerHTML zugewiesen werden. Beispielsweise verursacht der folgende Code einen Fehler:
<BODY>
<p id=pdiv></p>
<SCRIPT LANGUAGE="JavaScript">
pdiv.innerHTML = "<p>hello</p>"
</SCRIPT>
</BODY>
Darüber hinaus sind bei der dynamischen Bedienung von Seiteninhalten folgende Details zu beachten:
1. Nur der im Dokument BODY angezeigte Inhalt kann durch die oben genannten Eigenschaften und Methoden dynamisch geändert werden. Der Inhalt des BODY-Objekts kann dynamisch manipuliert werden, das BODY-Objekt selbst kann jedoch nicht ersetzt werden.
2. Die oben genannten Attribute und Methoden können nicht mit leeren Tags (HTML-Tags ohne Inhalt) wie „input“ und „img“ arbeiten.
3． Bei Tabellenobjekten können nur td-Objekte (innerHTML/innerText) und Tabellenobjekte (outerHMTL/outerText) bestimmte Attribute zum Ersetzen oder Einfügen von Inhalten verwenden. Andere Tabellenobjekte wie tr und tbody können diese Attribute nicht zum Ändern des Inhalts verwenden.