Acredito que todos estejam familiarizados com o atributo innerhtml do objeto DOM, mas o OuterHtml é menos usado. O atributo innerhtml retorna o HTML contido no objeto DOM da tag de início para a tag final, enquanto o atributo OuterHtml retorna HTML, incluindo a tag do objeto DOM. A figura a seguir pode explicar bem a diferença entre os dois atributos:
O OuterHtml é uma propriedade privada pertencente ao IE no início. Você pode visualizar a descrição na propriedade MSDN: OuterHtml (http://msdn.microsoft.com/en-us/library/ms534310(vs.85).aspx). Atualmente, IE, Chrome, Safari e Opera, podem suportar esse atributo. A razão pela qual o OuterHtml não suporta o Firefox, esse atributo sempre retornará indefinido no Firefox. É gratificante que o HTML5 adicionará este atributo.
Deixe o Firefox suportar os atributos externos da Exterhtml sendo implementados, estendendo o protótipo HTMLELEMENT:
A cópia do código é a seguinte:
if (typeof (htmlelement)! = "indefinido") {
Htmlelement.prototype .__ DefineSetter __ ("OuterHtml", função (s) {
var r = this.ownerDocument.Createrange ();
r.setstartBefore (isto);
var df = r.createContextualFragment (s);
this.parentnode.replacechild (df, isto);
retorno s;
});
Htmlelement.prototype .__ definegetter __ ("OuterHtml", function () {
var a = this.attributes, str = "<" this.TagName, i = 0;
para (; i <A.Length; i)
if (a [i]. Especificado)
str = "" Hormis Dans les Machines A SO prefere universos, Les Casinos Off Res Jeux por exemplo, Grandes Six Roues, Pai Go Poker, Blackjack, Baccarat, la <a href = "http://topcasinosenligne.com/la-roulette"> routte. a [i] .Name "=" "A [i] .Value" "";
if (! this.canavechildren)
retornar str " />";
return str ">" this.innerhtml "<!-" this.tagname "->";
});
Htmlelement.prototype .__ Definegetter __ ("canavechildren", function () {
Retornar
!/^(área | base | basefont |
COL | quadro | hr | img | br |
Entrada | ISIndex | Link | Meta
| param) $/. test (this.tagname.tolowercase ());
});
}
Este método vem do w3help (http://www.w3help.org/zh-cn/causes/sd9017), que é um pouco pesado e requer intrusão no protótipo. Há também uma alternativa mais simples. Primeiro, crie um nó vazio, adicione o objeto DOM para obter o atributo OuterHtml a este nó vazio e depois acesse o InnerHTML deste nó vazio:
A cópia do código é a seguinte:
Função OuterHtml (elem) {
if (typeof elem === "string") elem = document.getElementById (elem);
// Crie um nó div em vazio
var div = document.createElement ("div");
// Insira a elemcopia copiada no nó Div vazio
Div.AppendChild (elem.clonEnode (true));
// retorna o conteúdo HTML da div
retornar div.innerhtml;
};
Comparado ao método acima, não há necessidade de mover o protótipo e a quantidade de código é muito menor. Eu acredito que haverá outras soluções.