I believe everyone is familiar with the innerHTML attribute of the DOM object, but outerHTML is less used. The innerHTML attribute returns the HTML contained in the DOM object from the start tag to the end tag, while the outerHTML attribute returns HTML including the DOM object's tag. The following figure can explain the difference between the two attributes well:
outerHTML is a private property belonging to IE at the beginning. You can view the description on MSDN: outerHTML Property (http://msdn.microsoft.com/en-us/library/ms534310(VS.85).aspx). Currently IE, Chrome, Safari, and Opera can support this attribute. The reason why outerHTML does not support Firefox, this attribute will always return undefined in Firefox. It is gratifying that HTML5 will add this attribute.
Let Firefox support outerHTML attributes be implemented by extending HTMLElement prototype:
The code copy is as follows:
if (typeof(HTMLElement) != "undefined") {
HTMLElement.prototype.__defineSetter__("outerHTML", function(s) {
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 so preferes universes, les casinos off res jeux par example Grandes six roues, Pai Go Poker, Blackjack, Baccarat, la <a href="http://topcasinosenligne.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(){
Return
!/^(area|base|basefont|
col|frame|hr|img|br|
input|isindex|link|meta
|param)$/.test(this.tagName.toLowerCase());
});
}
This method comes from W3Help (http://www.w3help.org/zh-cn/causes/SD9017), which is a bit cumbersome and requires intrusion into the prototype. There is also a simpler alternative. First create an empty node, add the DOM object to obtain the outerHTML attribute to this empty node, and then access the innerHTML of this empty node:
The code copy is as follows:
function outerHtml(elem){
if(typeof elem === "string") elem = document.getElementById(elem);
// Create an empty div node
var div = document.createElement("div");
// Insert the copied elemCopy into the empty div node
div.appendChild(elem.cloneNode(true));
// Return the HTML content of the div
return div.innerHTML;
};
Compared to the above method, there is no need to move the prototype, and the amount of code is much smaller. I believe there will be other solutions.