Je crois que tout le monde connaît l'attribut InnerHTML de l'objet DOM, mais OUTERHTML est moins utilisé. L'attribut InnerHTML renvoie le HTML contenu dans l'objet DOM de la balise de démarrage à la balise de fin, tandis que l'attribut OUTERHTML renvoie HTML, y compris la balise de l'objet Dom. La figure suivante peut bien expliquer la différence entre les deux attributs:
OUTERHTML est une propriété privée appartenant à IE au début. Vous pouvez afficher la description sur la propriété MSDN: outerhtml (http://msdn.microsoft.com/en-us/library/ms534310(vs.85).aspx). Actuellement, IE, Chrome, Safari et Opera peuvent prendre en charge cet attribut. La raison pour laquelle OUTERHTML ne prend pas en charge Firefox, cet attribut ne reviendra toujours pas défini dans Firefox. Il est gratifiant que HTML5 ajoute cet attribut.
Laissez Firefox Prise en charge des attributs OUTERHTML être mis en œuvre en étendant le prototype HTMLElement:
La copie de code est la suivante:
if (typeof (htmlelement)! = "Undefined") {
Htmlelement.prototype .__ DefineSetter __ ("OuterHtml", fonction (s) {
var r = this.ownerDocument.Createrange ();
R.SetStartBefore (this);
var df = r.createContextualFragment (s);
this.parentnode.replacechild (df, this);
retour s;
});
Htmlelement.prototype .__ Definegetter __ ("OuterHtml", fonction () {
var a = this.attributes, str = "<" this.tagname, i = 0;
pour (; i <a.Length; i)
if (a [i]. spécifié)
Str = "" Hormis dans les machines a SO préférant les univers, les casinos off res jeux par exemple grandes six roues, Pai go poker, blackjack, baccarat, la <a href = "http://topcasinosenligne.com/la-roulette"> roulette </a> et les craps, entre a [i] .name "=" "a [i] .value" "";
si (!
return str "/>";
return str ">" this.innerhtml "<! -" this.tagname "->";
});
Htmlelement.prototype .__ Definegetter __ ("canhavechildren", function () {
Retour
! / ^ (zone | Base | Basefont |
Col | Frame | Hr | IMG | Br |
Entrée | IsIndex | lien | Meta
| param) $ /. test (this.tagname.tolowercase ());
});
}
Cette méthode provient de W3Help (http://www.w3help.org/zh-cn/cUSES/SD9017), ce qui est un peu lourd et nécessite l'intrusion dans le prototype. Il existe également une alternative plus simple. Créez d'abord un nœud vide, ajoutez l'objet Dom pour obtenir l'attribut extérieurhtml à ce nœud vide, puis accédez à l'InnerHTML de ce nœud vide:
La copie de code est la suivante:
fonction exterhtml (elem) {
if (typeof elem === "String") elem = document.getElementById (elem);
// Créer un nœud div vide
var div = document.CreateElement ("div");
// insérer l'elemcopy copiée dans le nœud div vide
div.ApendChild (elem.clonenode (true));
// Renvoie le contenu HTML du div
retour div.innerhtml;
};
Par rapport à la méthode ci-dessus, il n'est pas nécessaire de déplacer le prototype et la quantité de code est beaucoup plus petite. Je crois qu'il y aura d'autres solutions.