How to append a raw JavaScript tag to document.body without jQuery

Question

I get a raw JavaScript tag from the server:

"<script>alert('hi');</script>"

Now, I need to append it to <body> so that it fires. I can't simply create a new script element, because this string already contains the <script> part. Is there something analogous to

child = document.createElementFromHTML("<script>alert('hi');</script>");
document.body.appendChild(child)

Thanks for any help.

EDIT

Here's why it's not a duplicate, hall monitors:

If you set the inner html of a div to be a script it won't fire. I need to append an element generated from only text to the body.

EDIT 2

final solution:

window.onload = function() {
document.body.innerHTML += "<script>alert('hi');</script>";
var script = document.scripts[document.scripts.length - 1];
var s = document.createElement("script");
s.textContent = script.textContent;
document.body.removeChild(script);
document.body.appendChild(s);
}

*"I can't simply create a new script element, because this string already contains the part."* What if you remove that part? `str.replace(/^ — Felix Kling, Feb 11 '17 at 01:44
Possible duplicate of [Creating a new DOM element from an HTML string using built-in DOM methods or prototype](http://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro) — matt, Feb 11 '17 at 01:44
i will never understand why people work for SO for free. Good job, hall monitors. — user1130176, Feb 11 '17 at 01:57

score 4 · Accepted Answer · answered Feb 11 '17 at 02:07

You can concatenate document.body.innerHTML with <script> html string, get .textContent of last script in document, create script element, set script element .textContent to value retrieved from concatenated html <script> string, remove last <script>, append new <script> to document.body.

<script>
  document.body.innerHTML += "<script>alert('hi');<\/script>");
  var script = document.scripts[document.scripts.length - 1];
  var s = document.createElement("script");
  s.textContent = script.textContent;
  document.body.removeChild(script);
  document.body.appendChild(s);
</script>

this is close, it assumes document.body is available, by wrapping this in document.onload it works, i'll add the final solution to the post, thanks for not being an SO dou che and dismissing my question, this is super helpful — user1130176, Feb 11 '17 at 02:15

score 1 · Answer 2 · answered Feb 11 '17 at 01:53

1

In this way you can insert <script> tag in your HTML

var script = document.body.appendChild(document.createElement('script'));
script.text = 'alert("Hi!");'

answered Feb 11 '17 at 01:53

neophyte

6,540
2
28
43

this won't work because i don't know a priori what the script is, it comes from the server as a string. – user1130176 Feb 11 '17 at 01:58
Can you make the server return only alert("Hi!"); without the script tags. I mean only the script content without the tags. – neophyte Feb 11 '17 at 01:59
no, but i wonder if i could use replace to strip out opening and closing tags – user1130176 Feb 11 '17 at 02:00
Yes that's a good idea or just try to get the inner code by breaking it on the basis of '<' brackets using split function. – neophyte Feb 11 '17 at 02:04
i found this, it works, in that it does append the script, but the script doesn't fire, any idea why? http://stackoverflow.com/questions/9334645/create-node-from-markup-string – user1130176 Feb 11 '17 at 02:08

How to append a raw JavaScript tag to document.body without jQuery

2 Answers2