Как добавить элемент <script>в DOM и выполнить его код?

Question

Я хочу добавить элемент в существующий DOM для запуска кода JavaScript.

Я сделал это с YUI:

var scriptNode = Y.Node.create('<script type="text/javascript" charset="utf-8">alert("Hello world!");<\/script>');
var headNode = Y.one('head');
headNode.append(scriptNode);

Он успешно добавлен в DOM, но не предупреждает меня.

Кто-то знает, в чем проблема?

Answer 1

Я понятия не имею, как работает функция Node.create() в YUI, поэтому не буду комментировать это. Но простой кросс-браузерный скрипт:

  window.onload = function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    var code = 'alert("hello world!");';
    try {
      s.appendChild(document.createTextNode(code));
      document.body.appendChild(s);
    } catch (e) {
      s.text = code;
      document.body.appendChild(s);
    }
  }

Блок try..catch необходим, поскольку большинству браузеров нравится первый метод, но некоторые этого не делают и выдают ошибку. Второй метод охватывает те. Вы также можете просто eval код, который более или менее эквивалентен и то, что делают некоторые библиотеки.

Answer 2

Я нашел эту функцию в исходном коде JQuery, который, кажется, делает то, что вы хотите, и чувствует себя немного чище, чем другие подходы ко мне. Но опять же я новичок в JS и, вероятно, не вижу деталей. В любом случае, кто-то может от этого извлечь что-то полезное.

function DOMEval( code, doc ) {
    doc = doc || document;

    var script = doc.createElement( "script" );

    script.text = code;
    doc.head.appendChild( script ).parentNode.removeChild( script );
}