Исполнение javascript кода при его вставке функцией innerHTML

Исполнение javascript кода при его вставке фукцией innerHTML

Есть на свете прекрасная функция innerHTML, которая помогает заменить содержимое практически любого тега, расположенного в теле документа HTML. Однако у неё есть ограничения:

  1. исполнение скриптов во вставленном тексте;
  2. не происходит применения правил CSS.

Исполнение скриптов

Для исправления первой проблемы можно применить следующую функцию

  1. function RunJS(id)
  2. {
  3.   var a = document.getElementById(id).getElementsByTagName('script')
  4.   var h = document.getElementsByTagName('head')[0];
  5.   for (var n = 0; n < a.length; n++)
  6.   {
  7.     if (a[n].src !='') {
  8.       var s = document.createElement('script');
  9.       s.type= 'text/javascript';
  10.       s.innerText = a[n].innerHTML;
  11.       s.src=a[n].src
  12.       h.appendChild(s);
  13.       h.removeChild(s);
  14.     }
  15.     else eval(a[n].innerHTML)
  16.   }
  17. }

Пример использования:

  1. document.getElementById('replace').innerHTML = '<span>Test text</span>' +
  2.   '<script>alert("run");</script>';
  3.  
  4. RunJS('replace');

Применение правил CSS

На счет CSS я не стал сильно заморачиваться и сделал функцию загрузки внешнего CSS-файла.

  1. function addCss(url){
  2.   var h = document.getElementsByTagName('head')[0];
  3.   var c = document.createElement('link');
  4.   c.rel="stylesheet";
  5.   c.type="text/css" ;
  6.   c.href=url;
  7.   h.appendChild(c);
  8. }

Пример использования:

  1. addCss('/f/f/0/1/smile.css');

Так загружается CSS для статьи Альтернативный взгляд на смайлы.