將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中

回答

相關問題