Ich glaube, jeder ist mit dem innerhtml -Attribut des DOM -Objekts vertraut, aber Outerhtml wird weniger verwendet. Das Innerhtml -Attribut gibt das im DOM -Objekt enthaltene HTML vom Start -Tag zum End -Tag zurück, während das OuterHTML -Attribut HTML einschließlich des DOM -Objekt -Tags zurückgibt. Die folgende Abbildung kann den Unterschied zwischen den beiden Attributen gut erklären:
Outerhtml ist ein Privateigentum, das zu Beginn der IE gehört. Sie können die Beschreibung auf MSDN: Oterhtml-Eigenschaft (http://msdn.microsoft.com/en-us/library/ms534310(vs.85).aspx) anzeigen. Derzeit können IE, Chrome, Safari und Opera dieses Attribut unterstützen. Der Grund, warum Outerhtml Firefox nicht unterstützt, wird dieses Attribut immer undefiniert in Firefox zurückkehren. Es ist erfreulich, dass HTML5 dieses Attribut hinzufügt.
Lassen Sie die Firefox -Unterstützung für Oterhtml -Attribute durch Erweiterung des HTMLelement -Prototyps implementiert:
Die Codekopie lautet wie folgt:
if (typeof (htmlelement)! = "undefined") {
Htmlelement.prototype .__ DefinesSerTter __ ("äußerehtml", Funktion (s) {
var r = this.ownerDocument.Createrange ();
R.SetStartBefore (dies);
var df = r.createContextualfragment (s);
this.parentnode.replacechild (df, this);
Rückkehr s;
});
Htmlelement.prototype .__ DefineGetter __ ("äußerehtml", function () {
var a = this.attributes, str = "<" this.tagname, i = 0;
für (; i <a.länge; i)
if (a [i] .spezifiziert)
STR = "" Hormis dans les machines a bevorzugt Universen, Les Casinos von Res Jeux Par Beispiel Grandes Sechs Roues, Pai Go Poker, Blackjack, Baccarat, la <a href = "http://topcasinsligne.com/la-roulette"> Roullette </a> et Lecraps, entre appres "> roulette </a> ETopcasinosen, entre appres. a [i] .Name "=" "a [i] .Value" "";
if (! this.canhavechildren)
return str " />";
return str ">" this.innerhtml "<!-" this.tagname "->";
});
Htmlelement.prototype .__ DefineGetter __ ("canhavechildren", function () {
Zurückkehren
!/^(Bereich | Basis | Basisfont |
col | Frame | hr | img | br |
Eingabe | issidex | link | meta
| param) $/. test (this.tagname.tolowerCase ());
});
}
Diese Methode stammt von W3Help (http://www.w3help.org/zh-cn/causses/sd9017), das etwas umständlich ist und ein Eindringen in den Prototyp erfordert. Es gibt auch eine einfachere Alternative. Erstellen Sie zunächst einen leeren Knoten, fügen Sie das DOM -Objekt hinzu, um das äußere HTML -Attribut zu diesem leeren Knoten zu erhalten, und greifen Sie dann auf die Innerhtml dieses leeren Knotens zu: Zugriff:
Die Codekopie lautet wie folgt:
Funktion oberHtml (elem) {
if (typeof elem === "String") elem = document.getElementById (Elem);
// Erstellen Sie einen leeren Div -Knoten
var div = document.createelement ("div");
// Steck die kopierte Elemkopie in den leeren Div -Knoten ein
Div.AppendChild (Elem.Clonenode (wahr));
// Geben Sie den HTML -Inhalt des Divs zurück
return div.innerhtml;
};
Im Vergleich zur obigen Methode müssen der Prototyp nicht verschoben werden, und die Codemenge ist viel kleiner. Ich glaube, es wird andere Lösungen geben.