Creo que todos están familiarizados con el atributo InnerHTML del objeto DOM, pero OUTERHTML es menos utilizado. El atributo InnerHTML devuelve el HTML contenido en el objeto DOM desde la etiqueta de inicio a la etiqueta final, mientras que el atributo externo de OUTERHTML devuelve HTML, incluida la etiqueta del objeto DOM. La siguiente figura puede explicar bien la diferencia entre los dos atributos:
Outerhtml es una propiedad privada que pertenece al IE al principio. Puede ver la descripción en la propiedad MSDN: Outerhtml (http://msdn.microsoft.com/en-us/library/ms534310(vs.85).aspx). Actualmente, es decir, Chrome, Safari y Opera pueden admitir este atributo. La razón por la cual OUTERHTML no admite Firefox, este atributo siempre volverá indefinido en Firefox. Es gratificante que HTML5 agregue este atributo.
Deje que Firefox apoye los atributos externos se implementan extendiendo el prototipo HTMLELEMENT:
La copia del código es la siguiente:
if (typeof (htmlelement)! = "indefinido") {
Htmlelement.prototype .__ Definessetter __ ("outerhtml", function (s) {
var r = this.OwnerDocument.CreaterGe ();
r.setStartbefore (esto);
var df = r.createContextualFragment (s);
this.parentnode.replaceChild (df, esto);
regreso s;
});
Htmlelement.prototype .__ definegetter __ ("outerhtml", function () {
var a = this.attributes, str = "<" this.tagname, i = 0;
para (; i <a.length; i)
if (a [i] .pecified)
str = "" Hormis dans Les Máquinas A SO prefiere los universos, Les Casinos Off Res Jeux Par Ejemplo Grandes Roues, Pai Go Poker, Blackjack, Baccarat, LA <a href = "http://topcasinosseenligne.com/la-Roulette"> Roulette </a> et Le Craps, Entre Autres. a [i] .name "=" "a [i] .value" "";
if (! this.canhaveChildren)
return str " />";
return str ">" this.innerhtml "<!-" this.tagname "->";
});
Htmlelement.prototype .__ definegetter __ ("CanhaveChildren", function () {
Devolver
!/^(área | base | BaseFont |
col | marco | hr | img | br |
entrada | isindex | enlace | meta
| param) $/. test (this.tagname.tolowercase ());
});
}
Este método proviene de W3Help (http://www.w3help.org/zh-cn/causes/sd9017), que es un poco engorroso y requiere intrusión en el prototipo. También hay una alternativa más simple. Primero cree un nodo vacío, agregue el objeto DOM para obtener el atributo externo a este nodo vacío y luego acceda al internerhtml de este nodo vacío:
La copia del código es la siguiente:
function outerhtml (elem) {
if (typeof elem === "cadena") elem = document.getElementById (elem);
// Crear un nodo Div vacío
var div = document.createElement ("div");
// inserta la elemcopy copiada en el nodo div vacío
div.appendchild (elem.clonenode (true));
// devuelve el contenido HTML del div
regreso div.innerhtml;
};
En comparación con el método anterior, no hay necesidad de mover el prototipo, y la cantidad de código es mucho menor. Creo que habrá otras soluciones.