Динамически вставьте строку HTML в ГОЛОВКУ документа - PullRequest
Новая
       7

Динамически вставьте строку HTML в ГОЛОВКУ документа

3 голосов
/ 05 мая 2009

Мне нужно вставить строку HTML в тег <head> текущего DOM документа, одним способом: вы создаете элемент div, заполняете его innerHTML, копируете элемент за элементом в элемент <head>. Но эти методы не работают в IE / Opera по причинам, указанным ниже, хотя в FF3 оба описанные ниже методы работают отлично, и браузер обрабатывает добавленные элементы STYLE / 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

1 Ответ

2 голосов
/ 05 мая 2009

Вот глупый взлом, который решает проблему. Добавьте htmlStr непустой строковый тег (node.nodeType === 3), и все будет работать: 

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]);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...