CODEWITHSUNDEEP
javascripthtml
nick
nick

Reputation: 3249

Run script after appending it to the HTML

I have a string with HTML:

var str = '<div><p>Examplee</p></div><script>alert("testing!")</script>';

and then I append it to the HTML:

document.body.innerHTML += str;

and the content is appended but the script does not execute, is there a way to force it?

Upvotes: 4

Views: 6196

Answers (3)

Raphael M.
Raphael M.

Reputation: 140

You should change the HTML after it was loaded. Try this:

document.addEventListener("DOMContentLoaded", function(event) {
    document.body.innerHTML += str;
});

Upvotes: -1

Rob S.
Rob S.

Reputation: 1156

jQuery provides the $.getScript(url [,success]) function. You can then load and execute your code from a separate jquery file which helps to manage and control the flow of execution.

basically put your alert("testing!") script inside a separate file, for instance alert.js in the same directory.

Then you can run the script when adding your employee to the HTML.

var str = '<div><p>Examplee</p></div>';
var url = 'alert.js';    
document.body.innerHTML += str;    
$.getScript(url);

I know this may seem like more work, but it is better practice to keep your javascript out of your HTML. You can also use a callback to gather user data after the alert or notify another process that the user has been alerted.

$.getScript(url, function(){
  //do something after the alert is executed.
});

For instance maybe it would be a better design to add the employee after the alert is executed.

var str = '<div><p>Examplee</p></div>';
var url = 'alert.js'; 
$.getScript(url, function(){
  document.body.innerHTML += str;
});

Edit: I know jQuery is not tagged, but I am also no petitioning to be the accepted answer to this question. I am only offering another alternative for someone who may run into the same issue and may be using jQuery. If that is the case $.getScript is a very useful tool designed for this exact problem.

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1075079

First, a caveat: Naturally, only do this with scripts you trust. :-)

There are a couple of ways. Basically, you need to:

  1. Get the text of the script, and

  2. Run it

Getting the text

One option is just to go ahead and add it, then find it and grab its text:

document.body.innerHTML += str;
var scripts = document.querySelectorAll("script");
var text = scripts[scripts.length - 1].textContent;

On obsolete browsers, you may need to feature-detect textContent vs. innerText.

You might want to give it an identifying characteristic (id, class, etc.) so you don't have to find it by position like that.

Alternately, you could do what the PrototypeJS lib does and try go get it from the string with regex. You can find their source code for doing that here (look for extractScripts).

Running it

Once you have the text of the script, you have several options:

  • Use indirect eval (aka "global eval") on it: (0, eval)(text). This is not the same as eval(text); it runs the code in global scope, not local scope.

  • Create a new script element, set its text to the text, and add it

    var newScript = document.createElement("script");
newScript.textContent = text;
document.body.appendChild(newScript);

    If doing that, might make sense to remove the original, though it doesn't really matter.

Example that grabs the text of the script element after adding it and uses indirect eval:

var str = '<div><p>Examplee</p></div><script>alert("testing!")<\/script>';
document.body.innerHTML += str;
var scripts = document.querySelectorAll("script");
(0, eval)(scripts[scripts.length - 1].textContent);

Presumably you don't really use += on document.body.innerHTML, which builds an HTML string for the whole page, appends to it, tears the whole page down, and then parses the new HTML to build a new one. I assume that was just an example in your question.

Upvotes: 9

Related Questions