关于在js中动态生成标签中转义需要注意的点

这里有个需求,需要用js动态生成一个标签怎么办?大家肯定会说,这还不简单,直接varhtml="<inputtype='button'value='提交'/>";不就行了?大家有没想过为什么是这样?默认一个字符串,可以用单引号或者双引号,那么这个特性就决定了,如果在字符串中还有字符串或者说是语法需要用单引号或者双引号,直接加上就行了.但是需要注意的是varhtml="<inputtype="button"/>";像这种出现多个双引号,浏览器会以语法不对而解析html代码失败什么都不显示结束,为什么会这样呢?因为他解析默认是以两个单引号或者两个双引号为一对去解析,而在上面情况中"<inputtype="会被当成一个整体,这明显是语法不对了,那么会被浏览器忽略.即什么都不显示.只显示正确的部分如果一个标签中哪个属性语法不正确,就会被忽略.想要正确显示怎么办呢,就是引号之间正确嵌套,保证第一个成对的引号都一一对应,这什么意思,即varhtml="<inputtype='button'value='提交'/>"开始一个双引号,中间就必须换成单引号,一对单引号连续对应,比如'button','提交'.这样浏览器就明白了,他们是一对,而不用加转义符.这得益于在html代码中双引号和单引号含义相同,可以理解为都表示字符串.这里明确一点,最外层的我称为一级引号,里面子引号我称之为二级引号那么如果在二级引号中还有引号呢?即三级引号.三级引号不得了,直接把二级引号切断了.正确的书写方法应该是

varhtml='<inputtype="button"value="提交"onclick="document.location=\'http://www.baidu.com\'"/>';

注意在html中,对应标签<>尖括号的解析是不严格,比如

<inputtype="button"
同样可以解析为button标签,只有

<inputtype="button"
在尖括号与input之间多出一个空格,他才会解析为文本,即可以理解为你需要书写<小于号,是完全可以直接写的,而不用使用引用实体<
但是要注意后面不要紧挨某些标签名,比如textarea,那么他会把后面剩下的内容全部包在textarea中,所以基本上可以得出的结论是,某些
情况下,是完全可以直接书写<或>为文本,而不用使用引用实体,那么他也会当成是文本去解析的
回到正题中,那么需要浏览器正确显示标签并且中间有三级引号怎么办呢.那么就需要使用转义\或者是实体引用了即".或者先双引号:

varhtml="<inputtype='button'value='submit'onclick='document.location.href=\"http://www.qq.com\"'\>";