Beware of innehtml mines

Source: Internet
Author: User

You all like to use innerhtml to add content, but innerhtml is different in the two camps. In retrospect, ie will kill some blank spaces in the front of the tag, and all the labels in the tag will be capitalized. The dynamically added attributes will be displayed. In some elements, it is still read-only. It was chilling to find that this thing invented by IE was finally exposed to so many defects. However, innerhtml still has a mine, which exists in the most standard Firefox.Code:

 
VaR newtable = document. createelement ('table'); document. body. appendchild (newtable); var newtr = document. createelement ('tr'); var rowcontent = '<TD> situ zhengmei </TD> <em> restlessdream </em> </TD>'; newtr. innerhtml = rowcontent; newtable. appendchild (newtr); alert (newtable. innerhtml) if (rowcontent. tolowercase () = newtr. innerhtml. tolowercase () {alert ("it must be as expected! ");} Else {alert (" You stepped on the thunder! ");}

<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 8"/> <br/> <title> force Internet Explorer 8 run by situ zhengmei </title> </P> <p> <SCRIPT type = "text/JavaScript"> </P> <p> window. onload = function () {<br/> var newtable = document. createelement ('table'); <br/> document. body. appendchild (newtable); <br/> var newtr = document. createeleme NT ('tr '); <br/> var rowcontent = '<TD> situ zhengmei </TD> <em> restlessdream </em> </TD>'; <br/> newtr. innerhtml = rowcontent; <br/> newtable. appendchild (newtr); <br/> alert (newtable. innerhtml) <br/> If (rowcontent. tolowercase () = newtr. innerhtml. tolowercase () {<br/> alert ("it must be as expected! "); <Br/>}else {<br/> alert (" you are stepping on Thunder! "); <Br/>}</P> <p> </SCRIPT> <br/> </pead> <br/> <body> </P> <p> </body> <br/> </ptml> <br/>

Run code

When we add innerhtml to the tr node, it will be parsed by Firefox:

 
Situ zhengmei <em> restlessdream </em>

Instead of the original:

 
<TD> situ zhengmei </TD> <em> restlessdream </em> </TD>

The TD tag is removed! I want to adjust the sequence of adding the DOM tree:

 
VaR newtable = document. createelement ('table'); document. body. appendchild (newtable); var newtr = document. createelement ('tr '); newtable. appendchild (newtr); var rowcontent = '<TD> situ zhengmei </TD> <em> restlessdream </em> </TD>'; newtr. innerhtml = rowcontent;

<Br/> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = 8"/> <br/> <title> force Internet Explorer 8 run by situ zhengmei </title> </P> <p> <SCRIPT type = "text/JavaScript"> </P> <p> window. onload = function () {<br/> var newtable = document. createelement ('table'); <br/> document. body. appendchild (newtable); <br/> var newtr = document. createeleme NT ('tr'); <br/> newtable. appendchild (newtr); <br/> var rowcontent = '<TD> situ zhengmei </TD> <em> restlessdream </em> </TD> '; <br/> newtr. innerhtml = rowcontent; <br/> alert (newtable. innerhtml) <br/> If (rowcontent. tolowercase () = newtr. innerhtml. tolowercase () {<br/> alert ("it must be as expected! "); <Br/>}else {<br/> alert (" you are stepping on Thunder! "); <Br/>}</P> <p> </SCRIPT> <br/> </pead> <br/> <body> </P> <p> </body> <br/> </ptml> <br/>

Run code

This solves the problem of Firefox!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.