Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

HTML5标签在低版本IE上innerHTML的问题

  在低版本 IE 浏览器上,要使文档能够解析非原生的标签就必须在文档上对相应标签名执行一次 createElement 操作。但对于执行这个操作前就已经在文档中存在的标签,或 Parse HTML 不在文档环境中执行的标签(文档外的元素 innerHTML 操作等)是没有效果的。
  下面这个实验是把可能遇到的几种情况都列出来了了 <style>
section {display:block;color:red;}
</style>
<section>此SECTION解析时文档还没创建SECTION标记</section>
<SCRIPT>
document.createElement("section");
onload=function(){
  var div=document.createElement("div");
  div.innerHTML="<section>此SECTION解析时容器不在文档中</section>";
  document.body.appendChild(div);
};
</SCRIPT>
<section>此SECTION解析时文档已经创建SECTION标记</section>

  只有在 HTML 解析之前它的容器所在的文档已经创建了相应的元素时才会生效。其实只要让代码先在文档中,然后再执行 innerHTML 就可以生效,比如这样: <style>
section {display:block;color:red;}
</style>
<SCRIPT>
document.createElement("section");
onload=function(){
  var div=document.createElement("div");
  document.body.appendChild(div); //在解析HTML之前先放入文档
  div.innerHTML="<section>此SECTION解析时容器已在文档中</section>";
};
</SCRIPT>
  除了以上元素本身的问题外,还得找对文档才能生效,因为 createElement 操作是针对文档的。我们在 document 上执行的 createElement 操作,在 documentFragment 中是不会生效的。所以在 documentFragment 中操作的话需要在此执行 createElement,在当前文档片段中对标签名做初始化。 <style>
section,nav {display:block;color:red;}
</style>
<script>
//我们试试在主文档上初始化 NAV 标签
document.createElement("nav");
onload=function(){
  var fragment=document.createDocumentFragment();
  //在文档片段上初始化 SECTION 标签
  fragment.createElement("section");
  //在文档片段中放一个元素(文档片段不支持直接 innerHTML)
  var div=document.createElement('div');
  fragment.appendChild(div);
  div.innerHTML="\
    <nav>我是nav</nav>\
    <section>此SECTION在文档片段中解析</section>";
  //放入文档
  document.body.appendChild(div);
};
</script>
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^