如何在IE6~8下创建HTML5新标签


如何在在IE6~8下创建HTML5新标签,虽然document.createElement能创建HTML5的新标签,但动态创建尤其是元素时,还是用innerHTML比较适合。不过IE的innerHTML存在大量的问题,style,link ,script就需要特殊方法去生成。这种方法又将用于我们HTML5的新元素的创建!见下面例子:

示例一:

<!doctype html>
<html>
  <head>
    <title>动态创建HTML5元素</title>
  
<script>
 
      var div = document.createElement("div");
      div.innerHTML = "<section>section</section>";
      alert( div.innerHTML ); // "section</SECTION>" in IE6~IE8
          
    </script>
</head>
<body>
动态创建HTML5元素</body>
</html>

示例二:

<!doctype html>
<html>
  <head>
    <title>动态创建HTML5元素</title>
   
    <script>
 
      var div = document.createElement("div");
        div.innerHTML = "fixie<div>" +"<section>section</section>" +"</div>";
        alert(div.innerHTML );

        alert( div.lastChild.innerHTML );

           </script>
</head>
<body>
动态创建HTML5元素</body>
</html>

评论:把第二个示例的最后一个改成:
alert( div.lastChild.childNodes.length);
IE下的结果是3.
这三个节点分别是:
<section>
section
</section>
而不是outerHTML为"<section>section</section>"的一个节点。

初步总结:
1。在赋innerHTML时,IE会把左边的无效内容去掉,一直找到第一段有效的html开始。
2。对于IE不认识的标签,IE默认把它们都当作独立标签,而不进行标签配对。
所以div.innerHTML="a<ddddd>b</ddddd>"的结果是有四个child,而不是两个


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3