FirefoxouterHTML implementation code _ javascript skills

Firefox does not have outerHTML. Using the following method to reduce the number of DOM can accelerate the construction of DOM Tree and render tree during page parsing by the browser, thus improving the page performance. For this reason, we can save the HTML that is invisible to the first screen rendering in TextArea, and then process the HTML after rendering. To add the temporary HTML content in TextArea to the page, it is easiest and convenient to use the element's outerHTML attribute. However, the DOM standard does not define outerHTML, supported browsers include IE6 +, safari, operal and Chrome, which are not supported yet after FF4.0-test. So we can implement a cross-browser outerHTML.
OuterHTML is the html used to obtain or set tags containing elements. The following is the implementation code:

The Code is as follows:

If (typeof HTMLElement! = "Undefined "&&! ("OuterHTML" in HTMLElement. prototype )){
// Console. log ("defined outerHTML ");
HTMLElement. prototype. _ defineSetter _ ("outerHTML", function (str ){
Var fragment = document. createDocumentFragment ();
Var p = document. createElement ("p ");
P. innerHTML = str;
For (var I = 0, n = p. childNodes. length; I Fragment. appendChild (p. childNodes [I]);
}
This. parentNode. replaceChild (fragment, this );
});
//
HTMLElement. prototype. _ defineGetter _ ("outerHTML", function (){
Var tag = this. tagName;
Var attributes = this. attributes;
Var attr = [];
// For (var name in attributes) {// traverse the members in the prototype chain
For (var I = 0, n = attributes. length; I If (attributes [I]. specified ){
Attr. push (attributes [I]. name + '= "' + attributes [I]. value + '"');
}
}
Return ((!! This. innerHTML )?
'<' + Tag + ''+ attr. join ('') + '>' + this. innerHTML +' ':
'<' + Tag + ''+ attr. join ('') + '/> ');
});
}

Code Description:
1. Check whether the browser supports outerHTML to avoid overwriting the native Implementation of the browser.
2 "_ defineSetter _", "_ defineGetter _" is the private aspect of the firefox browser. Define the operations to be performed when setting property values and obtaining properties respectively.
3. In "_ defineSetter _" "outerHTML", to avoid frequent reflow caused by too many elements inserted into the page, performance is affected. The fragment object of the document fragment is used to temporarily store DOM elements that need to be inserted into the page.
4. Use the element attributes attribute in "_ defineGetter _" "outerHTML" to traverse the attribute specified for the element. In combination with innerHTML, an html string containing the original owner is returned.
Test code:

The Code is as follows:

OuterHTML

This isParagraphWith a list following it

• Item 1


• Item 2


• Item 3


• Item 4

Script
If (typeof HTMLElement! = "Undefined "&&! ("OuterHTML" in HTMLElement. prototype )){
Console. log ("defined outerHTML ");
HTMLElement. prototype. _ defineSetter _ ("outerHTML", function (str ){
Var fragment = document. createDocumentFragment ();
Var p = document. createElement ("p ");
P. innerHTML = str;
For (var I = 0, n = p. childNodes. length; I Fragment. appendChild (p. childNodes [I]);
}
This. parentNode. replaceChild (fragment, this );
});
//
HTMLElement. prototype. _ defineGetter _ ("outerHTML", function (){
Var tag = this. tagName;
Var attributes = this. attributes;
Var attr = [];
// For (var name in attributes) {// traverse the members in the prototype chain
For (var I = 0, n = attributes. length; I If (attributes [I]. specified ){
Attr. push (attributes [I]. name + '= "' + attributes [I]. value + '"');
}
}
Return ((!! This. innerHTML )?
'<' + Tag + ''+ attr. join ('') + '>' + this. innerHTML +' ':
'<' + Tag + ''+ attr. join ('') + '/> ');
});
}
Var content = document. getElementById ("content ");
Alert (content. outerHTML)
Script

Assume that you want to obtain

Sdfdsdfsd

P's outerHTML
Code:

The Code is as follows:

Var _ p = document. getElementById ('outerid ');
_ P = _ P. cloneNode ();
Var _ DIV = document. createElement ();
_ DIV. appendChild (_ P );
Alert (_ DIV. innerHTML); is P's outerHTML;

Firefox does not have outerHTML. Use the following methods to solve this problem:

The Code is as follows:

/**
* After firefox-compatible outerHTML uses the following code, firefox can use element. outerHTML
**/
If (window. HTMLElement ){
HTMLElement. prototype. _ defineSetter _ ("outerHTML", function (sHTML ){
Var r = this. ownerDocument. createRange ();
R. setStartBefore (this );
Var df = r. createContextualFragment (sHTML );
This. parentNode. replaceChild (df, this );
Return sHTML;
});
HTMLElement. prototype. _ defineGetter _ ("outerHTML", function (){
Var attr;
Var attrs = this. attributes;
Var str = "<" + this. tagName. toLowerCase ();
For (var I = 0; iattr = attrs [I];
If (attr. specified)
Str + = "" + attr. name + '= "' + attr. value + '"';
}
If (! This. canHaveChildren)
Return str + "> ";
Return str + ">" + this. innerHTML +" ";
});
HTMLElement. prototype. _ defineGetter _ ("canHaveChildren", function (){
Switch (this. tagName. toLowerCase ()){
Case "area ":
Case "base ":
Case "basefont ":
Case "col ":
Case "frame ":
Case "hr ":
Case "img ":
Case "br ":
Case "input ":
Case "isindex ":
Case "link ":
Case "meta ":
Case "param ":
Return false;
}
Return true;
});
}

Valid test.
New solutions for insertAdjacentHTML compatibility

The Code is as follows:

// --- Insert html code at the end of the component
Function InsertHtm (op, code, isStart ){
If (Dvbbs_IsIE5)
Op. insertAdjacentHTML (isStart? "Afterbegin": "afterEnd", code );
Else {
Var range = op. ownerDocument. createRange ();
Range. setStartBefore (op );
Var fragment = range. createContextualFragment (code );
If (isStart)
Op. insertBefore (fragment, op. firstChild );
Else
Op. appendChild (fragment );
}
}

Reference for inner/outerHTML in NC6
DOM level 1 has no methods to allow for insertion of unparsed HTML into the document tree (as IE allows with insertAdjacentHTML or assignment to inner/outerHTML ). NN6 (currently in beta as NN6PR3) know supports. innerHTMLproperty of HTMLElements so that you can read or write the innerHTML of a page element like in IE4 +. NN6 also provides a DOM level 2 compliant Range object to which a createContextualFragment ('html source string') was added to spare DOM scripters the task of parsing html and creating DOM elements. you create a Range with var range = document. createRange (); Then you shoshould set its start point to the element where you want to insert the html for instance var someElement = document. getElementById ('elementid'); range. setStartAfter (someElement); Then you create a document fragment from the html source to insert for example var docFrag = range. createContextualFragment ('

Kibology for all.

'); And insert it with DOM methods someElement. appendChild (docFrag); The Netscape JavaScript 1.5 version even provides so called setters for properties which together with the ability to prototype the DOM elements allows to emulate setting of outerHMTL for NN6: