Question

我需要在当前文档DOM的<head>标记中插入HTML字符串，一种方法是：创建div元素，填充其innerHTML，逐项复制到{{1元素。但是由于下面给出的原因，这些方法在IE / Opera中不起作用，但在FF3 两者下面的方法工作正常，浏览器处理添加的STYLE / SCRIPT元素。

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

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

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

<head>

方法2 - 失败，因为浏览器无法处理添加的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]);
}

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 个答案: