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

Question

我需要在当前文档DOM的<head>标记中插入一个HTML字符串，一种方法是：创建一个div元素，填充其innerHTML，逐项复制到<head>元素中。 但是这些方法没有在IE / Opera一起使用下面给出的理由，但在FF3下面的方法都很好地工作，并且浏览器处理添加样式/ SCRIPT元素。

有没有其他方法可以直接将字符串插入<head>并处理这些项目？

（为什么他们在IE / Opera中失败）

方法1 - 失败，因为innerHTML无法解析/忽略字符串中的META，STYLE，SCRIPT元素

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]);
}

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

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

Answer 1

这是一个解决问题的愚蠢黑客。 将非空字符串标记（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]);
}

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

问题描述

1 个解决方案

解决方案1
2 已采纳

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

问题描述

1 个解决方案

解决方案1 2 已采纳

解决方案1
2 已采纳