I needed something similar, but needed the script to remain or be re-created in the same spot as the original script, since my script targets the location of the script tag in the DOM to create/target elements. I also made the script recursive to make sure it also works if it is more than one level down.
NOTE: I use const here, if you have a older browser, just use var.
window.exec_body_scripts = function(body_el) { // ref: https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml based on Larry K's answer // 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. const type__Js = 'text/javascript', tagName__Script = 'script', tagName__Script__Upper = tagName__Script.toUpperCase(); var scripts = [], script, i; function evalScript(elem) { var parent = elem.parentNode, data = (elem.text || elem.textContent || elem.innerHTML || ""), script = document.createElement(tagName__Script); script.type = type__Js; try { // doesn't work on ie... script.appendChild(document.createTextNode(data)); } catch (e) { // IE has funky script nodes script.text = data; } // Make sure to re-insert the script at the same position // to make sure scripts that target their position // in the DOM function as expected. var parent = elem.parentNode; parent.insertBefore(script, elem); parent.removeChild(elem); }; // Get all scripts (recursive) if (typeof (document.querySelectorAll) !== typeof (void 0)) { document.querySelectorAll('script').forEach((scr) => { if (!scr.type || scr.type.toLowerCase() === type__Js) scripts.push(scr); }); } else { var children_nodes = body_el.childNodes, child; for (i = 0; children_nodes[i]; i++) { child = children_nodes[i]; if ( child.nodeName && child.nodeName.toUpperCase() === tagName__Script__Upper && ( !child.type || child.type.toLowerCase() === type__Js ) ) { scripts.push(child); } // Recursive call window.exec_body_scripts(child); } } for (i = 0; scripts[i]; i++) { evalScript(scripts[i]); } };
function testFunction(){ alert('test'); }to the code inserted into innerHTML, and then try calling it, it says that the function is not defined.