2 Lösungen zur Verwendung von OuterHTML in Firefox_Javascript-Tipps

Jeder muss mit dem innerHTML-Attribut des DOM-Objekts vertraut sein, aber das äußereHTML-Attribut ist weniger nützlich. Das innerHTML-Attribut gibt den im DOM-Objekt enthaltenen HTML-Code vom Start-Tag bis zum End-Tag zurück, während das äußereHTML-Attribut den zurückgibt HTML einschließlich des Tags des DOM-Objekts selbst kann den Unterschied zwischen den beiden Attributen gut erklären:


outerHTML war ursprünglich ein privates Attribut, das zum IE gehörte. Sie können die MSDN-Beschreibung anzeigen auf: äußereHTML-Eigenschaft (http://msdn.microsoft.com/en-us/library/ms534310(VS.85).aspx). Derzeit unterstützen IE, Chrome, Safari und Opera dieses Attribut nicht. In Firefox wird dieses Attribut immer undefiniert zurückgegeben.
Lassen Sie Firefox das äußereHTML-Attribut unterstützen, indem Sie den Prototyp von HTMLElement erweitern:

Code kopieren Der Code lautet wie folgt:

if (typeof(HTMLElement) != " undefiniert") {
HTMLElement.prototype.__defineSetter__("outerHTML", Funktion(en) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r .createContextualFragment(s);
this.parentNode.replaceChild(df, this);
return s;
});
HTMLElement.prototype.__defineGetter__("outerHTML", function( ){
var a = this.attributes, str = "<" this.tagName, i = 0;
for (; i < a.length; i )
if (a[i] .specified)
str = " " Hormis dans les machines a us favorites universales, les casinos offer of games by example Grandes six roues, Pai Go Poker, Blackjack, Baccarat, the Roulette et le Craps, unter anderen. a[i].name "="" a[i].value """;
if (!this. canHaveChildren)
return str " />";
return str ">" this.innerHTML "";
});

HTMLElement.prototype.__defineGetter__("canHaveChildren", function(){
return
!/^(area|base|basefont|
col|frame|hr|img|br|
input|isindex|link|meta
|param)$/.test(this.tagName.toLowerCase());
});
}

Diese Methode stammt von W3Help (http://www.w3help.org/zh-cn/causes/SD9017), was etwas umständlich ist und einen Eingriff in den Prototyp erfordert. Es gibt eine einfachere Alternative: Erstellen Sie zunächst einen leeren Knoten, fügen Sie das DOM-Objekt hinzu, um das äußereHTML-Attribut zum leeren Knoten zu erhalten, und greifen Sie dann auf das innerHTML des leeren Knotens zu:

Code kopieren Der Code lautet wie folgt:

function äußereHtml(elem){
if(typeof elem === "string") elem = document.getElementById(elem);
// Einen leeren div-Knoten erstellen
var div = document.createElement("div");
// Will copy elemCopy wird in einen leeren div-Knoten eingefügt
div.appendChild(elem.cloneNode(true));
// Den HTML-Inhalt des div zurückgeben
return div.innerHTML;

Im Vergleich zur oben genannten Methode besteht keine Notwendigkeit, den Prototyp anzufassen, und die Menge an Code ist meiner Meinung nach viel geringer.