Although document. createelement can create HTML5 tags, it is more suitable to use innerhtml to dynamically create elements, especially elements. However, there are a lot of problems with IE innerhtml, such as style, link, and script. This method will be used to create new HTML5 elements! See the following example:
<Br/> <! Doctype HTML> <br/> <pead> <br/> <title> dynamically create HTML5 elements by situ zhengmei </title> </P> <p> <SCRIPT> </P> <p> var DIV = document. createelement ("Div"); </P> <p> Div. innerhtml = "<section> section </section>"; </P> <p> alert (div. innerhtml); // "section </section>" in IE6 ~ IE8 </P> <p> </SCRIPT> <br/> </pead> <br/> <body> <br/> dynamically create HTML5 elements by situ zhengmei <br /> </body> <br/> </ptml> <br/>
RunCode
<Br/> <! Doctype HTML> <br/> <pead> <br/> <title> dynamically create HTML5 elements by situ zhengmei </title> </P> <p> <SCRIPT> </P> <p> var DIV = document. createelement ("Div"); <br/> Div. innerhtml = "fixie <div>" + "<section> section </section>" + "</div>"; <br/> alert (div. innerhtml); </P> <p> alert (div. lastchild. innerhtml ); </P> <p> </SCRIPT> <br/> </pead> <br/> <body> <br/> dynamically create HTML5 elements by situ zhengmei <br/> </body> <br/> </ptml> <br/>
Run code
Since JK joins in the discussion, let's write it into detail.
See the following code:
Window. onload = function () {var DIV = document. createelement ("Div"); Div. innerhtml = "<section> section </section>"; document. body. appendchild (DIV );}
How HTML is generated:
Section
This is what we can see with the IE8 developer tool.
According to JK, innerhtml is not very reliable, so we try another method (refer to self-innershiv)
// 2011. 2.26 by situ zhengmei function HTML5 (fragment) {If ((! Html5.fixed )&&(! -[1,]) {'abbr Article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video '. replace (/\ W +/g, function (n) {document. createelement (n) // The famous hack that enables IE to support new elements. It was discovered to De daemon 10 years ago.}); html5.fixed = 1;} var root = document.doc umentelement; vaR DIV = document. createelement ("Div"); Div. style. display = "NONE"; root. appendchild (DIV); Div. innerhtml = fragment; var Rv = document. createdocumentfragment (); While (div. firstchild) {RV. appendchild (div. firstchild);} root. removechild (DIV); Return RV;} <Br/> <! Doctype HTML> <br/> <pead> <br/> <title> in IE6 ~ 8. Create a New HTML5 tag </title> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 6"/> <br/> <style> <br/> section, \: Section {display: block; Background: red; padding: 10px ;}< br/> Nav, \: nav {display: block; Background: green; padding: 10px ;} <br/> </style> <br/> <SCRIPT> <br/> function HTML5 (fragment) {<br/> If ((! Html5.fixed )&&(! -[1,]) {<br/> 'abbr Article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video '. replace (/\ W +/g, function (n) {<br/> document. createelement (n) <br/>}); <br/> html5.fixed = 1; <br/>}< br/> var root = document.doc umentelement; <br/> var DIV = document. createelement ("Div"); <br/> Div. style. display = "NONE"; <br/> root. appen Dchild (DIV); <br/> Div. innerhtml = fragment; <br/> var Rv = document. createdocumentfragment (); <br/> while (div. firstchild) {<br/> RV. appendchild (div. firstchild); <br/>}< br/> root. removechild (DIV); <br/> return RV; <br/>}< br/> window. onload = function () {</P> <p> document. body. appendchild (HTML5 ("<section> <nav> <p> in IE6 ~ 8. Create a New HTML5 tag </p> <H2> by situ zhengmei </H2> </nav> </section> ")); <br/>}</P> <p> </SCRIPT> <br/> </pead> <br/> <body> </P> <p> </ body> <br/> </ptml> <br/>
Run code
If you are careful, you will notice that the CSS in Example 3 uses an hach, because the tagname of the new tag that we spit out is different from the HTML 5 tag, you can test it by yourself:
Window. onload = function () {var DIV = document. createelement ("Div"); var section = document. createelement ("section"); document. body. appendchild (DIV); Div. appendchild (section); section. appendchild (document. createtextnode ("test"); var clonednode = section. clonenode (true); alert (clonednode. outerhtml); // "<: Section> test </: Section> "} Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
