Appending Script to DOM without JQUERY

Question

The only way to fix it was using google chrome/IE10+ Just can't make it work on IE8.

I'm trying to append some Script to my web page, but i don't want to use any Jquery.

This DOES work, but it make use of jquery on the 3rd line.

var element = document.getElementById("contentSCRIPT");
    element.parentNode.removeChild(element);            // this removes the div and all the javascript inside it
    $('<div id="contentSCRIPT"></div>').appendTo(document.getElementById("main")); // this adds again the content to the page
    $('<script>' + document.getElementById("textSCRIPT").value + ' ;</' + 'script>').appendTo(document.getElementById("contentSCRIPT"));       // in here i try to add the javascript code back to the content.

I tryied:

var content = document.createTextNode('<div id="contentSCRIPT"></div>');
    document.getElementById("main").appendChild(content);

but it adds my script (content) as HTML not code.

any solutions? Thanks!

Edit:

I have to create the contentScript cuz i want to delete the script from the page and add another multiple times.

I tryied

var contentScript = document.createElement("script");
    contentScript.setAttribute("id", "contentSCRIPT");
    document.getElementById('contentSCRIPT').innerHTML = document.getElementById('textoSCRIPT').value;
    document.getElementById("main").appendChild(contentScript);

But again, this adds the code as an HTML (shows like a label on the page) and don't add to the DOM.

What script are you trying to add to the page? Is it text already present on the page, or are you trying to load/import an external file's script? — David Thomas, Jan 08 '14 at 19:38
@Dom: can I ask what you think he's currently *trying* to use? — David Thomas, Jan 08 '14 at 19:39
I am using Javascript... I already have some text on the page. the textSCRIPT element is a textarea input. — Daniel Boldrin, Jan 08 '14 at 19:41
@user3174789 After your edit it looks like you've a [XY problem](http://meta.stackexchange.com/a/66378/202792) here? — Teemu, Jan 08 '14 at 20:27

Scott Mermelstein · Accepted Answer · 2014-01-08T20:10:41.237

2

$('<div id="contentSCRIPT"></div>') can be written as follows in javascript:

var contentScript = document.createElement("div");
contentScript.setAttribute("id", "contentSCRIPT");

To do jQuery's appendTo, you want instead to appendChild on the parent:

document.getElementById("main").appendChild(contentScript);

Similarly, for the fourth line:

var script = document.createElement("script");
script.innerHTML = document.getElementById('textSCRIPT').value;
contentScript.appendChild(script);

EDIT

Based on your edited information, you don't need to create the div to hold the contentScript. Simply put an id on the script instead:

var contentScript = document.createElement("script");
contentScript.setAttribute("id", "contentSCRIPT");
contentScript.innerHTML = document.getElementById('textSCRIPT').value;
document.getElementById("main").appendChild(contentScript);

edited Jan 08 '14 at 20:10

answered Jan 08 '14 at 19:47

Scott Mermelstein

15,174
4
48
76

Already tryied, Does the same as i did, it adds as a HTML on the page not as Script – Daniel Boldrin Jan 08 '14 at 19:54
@user3174789 Sorry, I missed the fourth line, but have edited it in. The reason it's adding as HTML is because I added it directly to the div, instead of adding it to a script tag added to the div. This version should be better – Scott Mermelstein Jan 08 '14 at 20:01
@user3174789 My code before the edit should serve you well, but you may want to look at my edit as well, and see if that works for you. – Scott Mermelstein Jan 08 '14 at 20:11
it gives an error on the line contentScript.innerHTML = document.getElementById('textSCRIPT').value; Tryied to change the line to contentScript.innerHTML = "alert('test');"; but still gives an error – Daniel Boldrin Jan 09 '14 at 10:04
The element can't be found. I think adding an ID after creating it doesn't work? – Daniel Boldrin Jan 09 '14 at 11:46
@DanielBoldrin `textSCRIPT` is a different element, that all of your code has been referencing. The issue isn't with `contentSCRIPT`, which is the id that I set. setting `contentScript.innerHTML = "alert('test');"` should have properly set the innerHTML of the script variable. Doing exactly that works perfectly in [this fiddle](http://jsfiddle.net/BjbAd/). – Scott Mermelstein Jan 09 '14 at 15:03
when i use contentScript.innerHTML it shows a label on my page instead of alerting... Can it be anything? – Daniel Boldrin Jan 09 '14 at 15:48
@DanielBoldrin Look at the link I sent in my previous comment. If it's appearing as a label, you're setting the innerHTML of a div, not a script tag. – Scott Mermelstein Jan 09 '14 at 17:18
your link also does not work.. Im using IE 7/8 is that the problem? – Daniel Boldrin Jan 09 '14 at 17:45
@DanielBoldrin That is almost certainly the problem. There is a lot that IE7/8 doesn't implement, though in this case I don't know which command it doesn't like. It works in IE 11. :-) The best I can suggest is you post the code from the fiddle in another question and ask why it's failing in IE 7/8. – Scott Mermelstein Jan 09 '14 at 18:22
OK! Thank you very much! For now i'll just use google chrome for tests. – Daniel Boldrin Jan 10 '14 at 11:16

Teemu · Answer 2 · 2014-01-08T20:10:31.627

2

You can create a script element and append it to the document:

var script = document.body.appendChild(document.createElement('script'));
script.text = '/* CODE */';

As a response to your edit: You can remove a script element from the DOM, but you can't remove the script itself.

A live demo at jsFiddle.

edited Jan 08 '14 at 20:10

answered Jan 08 '14 at 19:47

Teemu

22,918
7
53
106

With enough knowledge of the script, it should be possible to `delete` the objects the script created, particularly if it's good at not polluting the global namespace. But of course, that is another step beyond removing the element. – Scott Mermelstein Jan 08 '14 at 20:14
1

@ScottMermelstein Yes, it is possible, but the final result depends on the code. Also some objects, like functions for timers can't be deleted, if a timer is running when trying to delete it. – Teemu Jan 08 '14 at 20:19

aziz punjani · Answer 3 · 2014-01-08T19:47:48.983

0

var script = document.createElement("script");
var contentScript = document.createElement("div");

contentScript.setAttribute("id", "contentSCRIPT");
script.innerHTML = document.getElementById('textSCRIPT').value;
contentScript.appendChild(script);

edited Jan 08 '14 at 19:47

answered Jan 08 '14 at 19:41

aziz punjani

25,586
9
47
56

score 0 · Answer 4 · answered Jan 08 '14 at 19:49

You can add a script tag programatically by simply adding the script tag:

var scriptTag = document.getElementsByTagName("head")[0].appendChild(document.createElement("script"));

scriptTag.innerHTML = document.getElementById("textSCRIPT").value;

Change "head" to "body" if you want to add the script to the body.

Appending Script to DOM without JQUERY

4 Answers4