javascriptdomevalinnerhtml

Executing <script> elements inserted with .innerHTML


I've got a script that inserts some content into an element using innerHTML.

The content could for example be:

<script type="text/javascript">alert('test');</script>
<strong>test</strong>

Problem is that the code inside the <script> tag doesn't get executed. I googled it a bit but there were no apparent solutions. If I inserted the content using jQuery $(element).append(content);the script parts got eval'd before being injected into the DOM.

Has anyone got a snippet of code that executes all the <script> elements? The jQuery code was a bit complex so I couldn't really figure out how it was done.

Edit:

By peeking into the jQuery code I've managed to figure out how jQuery does it, which resulted in the following code:

Demo:
<div id="element"></div>

<script type="text/javascript">
  function insertAndExecute(id, text)
  {
    domelement = document.getElementById(id);
    domelement.innerHTML = text;
    var scripts = [];

    ret = domelement.childNodes;
    for ( var i = 0; ret[i]; i++ ) {
      if ( scripts && nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
            scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
        }
    }

    for(script in scripts)
    {
      evalScript(scripts[script]);
    }
  }
  function nodeName( elem, name ) {
    return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
  }
  function evalScript( elem ) {
    data = ( elem.text || elem.textContent || elem.innerHTML || "" );

    var head = document.getElementsByTagName("head")[0] || document.documentElement,
    script = document.createElement("script");
    script.type = "text/javascript";
    script.appendChild( document.createTextNode( data ) );
    head.insertBefore( script, head.firstChild );
    head.removeChild( script );

    if ( elem.parentNode ) {
        elem.parentNode.removeChild( elem );
    }
  }

  insertAndExecute("element", "<scri"+"pt type='text/javascript'>document.write('This text should appear as well.')</scr"+"ipt><strong>this text should also be inserted.</strong>");
</script>

Solution

  • The OP's script doesn't work in IE 7. With help from SO, here's a script that does:

    exec_body_scripts: function(body_el) {
      // Finds and executes scripts in a newly added element's body.
      // Needed since innerHTML does not run scripts.
      //
      // Argument body_el is an element in the dom.
    
      function nodeName(elem, name) {
        return elem.nodeName && elem.nodeName.toUpperCase() ===
                  name.toUpperCase();
      };
    
      function evalScript(elem) {
        var data = (elem.text || elem.textContent || elem.innerHTML || "" ),
            head = document.getElementsByTagName("head")[0] ||
                      document.documentElement,
            script = document.createElement("script");
    
        script.type = "text/javascript";
        try {
          // doesn't work on ie...
          script.appendChild(document.createTextNode(data));      
        } catch(e) {
          // IE has funky script nodes
          script.text = data;
        }
    
        head.insertBefore(script, head.firstChild);
        head.removeChild(script);
      };
    
      // main section of function
      var scripts = [],
          script,
          children_nodes = body_el.childNodes,
          child,
          i;
    
      for (i = 0; children_nodes[i]; i++) {
        child = children_nodes[i];
        if (nodeName(child, "script" ) &&
          (!child.type || child.type.toLowerCase() === "text/javascript")) {
              scripts.push(child);
          }
      }
    
      for (i = 0; scripts[i]; i++) {
        script = scripts[i];
        if (script.parentNode) {script.parentNode.removeChild(script);}
        evalScript(scripts[i]);
      }
    };