将HTML字符串动态插入到文档的HEAD中

我需要将HTML字符串插入当前文档DOM的<head>标记中，一种方法是：创建div元素，填充其innerHTML，复制项目-item进入你的<head>元素。但是由于以下原因，这些方法在IE/Opera中不起作用，尽管FF3 两个下面的方法都可以很好地工作，并且浏览器处理添加的STYLE/SCRIPT元素。将HTML字符串动态插入到文档的HEAD中

是否有任何其他方式可以直接插入一个字符串到<head>并且处理这些项目？

（为什么它们在IE /歌剧失败）

方法1 - 失败因为innerHTML的无法分析/忽略串

insertHtml = function(parentElem,htmlStr){ 

    var frag = document.createDocumentFragment(); 
    var temp = document.createElement('div'); 
    temp.innerHTML = htmlStr; 

    // at this point, temp.childNodes.length=0 

    while (temp.firstChild) { 
     frag.appendChild(temp.firstChild); 
    } 
    // use native DOM methods to insert the fragment 
    parentElem.insertBefore(frag, parentElem.childNodes[0]); 
}

内META，风格，SCRIPT元件

方法2 - 失败因为添加的STYLE/SCRIPT元素不会被浏览器处理

document.getElementsByTagName("head")[0].innerHTML = htmlStr 
// although this populates the <head> tag successfully

来源

2009-05-05 Robin Rodricks

样，如果你用你的第一个功能，而是变“格”到“头”是什么？ – Greg 2009-05-05 13:05:00

然后IE/Opera在innerHTML分配后崩溃。显然你不能创建元素（'头'）！ – 2009-05-05 13:27:33

这是一个愚蠢的黑客解决问题。前置一个非空字符串标签（node.nodeType === 3）向htmlStr这样就可以了：

var insertHtml = function(parentElem, htmlStr){ 

    var frag = document.createDocumentFragment(); 
    var temp = document.createElement('div'); 
    temp.innerHTML = "hack" + htmlStr; 

    while (temp.firstChild) { 
     if (temp.firstChild.nodeType === 1) { 
      // add only element nodes 
      frag.appendChild(temp.firstChild); 
     } else { 
      // remove the hack string 
      temp.removeChild(temp.firstChild); 
     } 
    } 

    parentElem.insertBefore(frag, parentElem.childNodes[0]); 
}

来源

2009-05-05 13:26:32

将HTML字符串动态插入到文档的HEAD中

回答

相关问题