在IE6~8下创建HTML5新标签

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

既然JK加入讨论,就写详尽点吧.

见下面代码:

    window.onload = function(){
        var div = document.createElement("div");

        div.innerHTML = "<section>section</section>";
        document.body.appendChild(div);
      }

会生成如何HTML:


  
    section

这是使用IE8开发人员工具看到的情况

依照JK的报道，innerHTML也不太可靠了，因此我们尝试另一种方式（参考自innershiv）

//2011. 2.26 by 司徒正美
      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)//著名的让IE支持新元素的hack，早在十年前，就给DE大神发现了
          });
          html5.fixed = 1;
        }
        var root = document.documentElement;
        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;
      }

<!doctype html>
<html>
  <head>
    <title>在IE6~8下创建HTML5新标签</title>
    <meta http-equiv="X-UA-Compatible" content="IE=6" />
    <style>
      section,\:section{ display: block;background: red;padding: 10px;}
      nav,\:nav{ display: block;background: green;padding: 10px;}
    </style>
    <script>
      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)
          });
          html5.fixed = 1;
        }
        var root = document.documentElement;
        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;
      }
      window.onload = function(){

document.body.appendChild(html5("<section><nav><h1>在IE6~8下创建HTML5新标签</h1><h2>by 司徒正美 </h2></nav></section>"));
      }

</script>
  </head>
  <body>

</body>
</html>

如果是细心人，会留意到示例3的CSS用到一个hach，那是因为我们通过文档碎片，吐出的新标签的tagName与真的HTML5的标签是不一样的，具体可以自己测试一下：

    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>"
      }

posted on 2011-02-25 23:43 司徒正美阅读(3537) 评论(8) 编辑收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告

在IE6~8下创建HTML5新标签