ansaurus

Question

add javascript into a html page with jquery

Answer 1

+1 A:

You cannot use document.write after the page has finished loading. Instead, simply insert the contents that you want to be written in.

<script type="text/javascript">
     $(function() { // This is equivalent to document.ready
         var str="hello world";
         $('#insert_here').append(str);
     });
</script>

Sean Vieira 2010-08-05 18:47:49

Answer 2

+1 A:

See my answer to Are dynamically inserted <script> tags meant to work? for why you can't use innerHTML, which jQuery's functions map to when passed a HTML string, to insert a script element. document.write will also fail when used after the document has been fully parsed.

To work around this, you will have to use DOM functions to insert an element into the div. Google ads are iframes, so it's usually a case of finding the iframe code and appending that instead.

To correctly insert a script element, you need to use DOM functions, for instance:

var txt = 'alert("Hello");';
var scr = document.createElement("script");
scr.type= "text/javascript";

// We have to use .text for IE, .textContent for standards compliance.
if ("textContent" in scr)
    scr.textContent = txt;
else
    scr.text = txt;

// Finally, insert the script element into the div
document.getElementById("insert_here").appendChild(scr);

Andy E 2010-08-05 18:51:01

Thanks for your advice ! Now I am able to insert the Javascript but I can not execute it. Would you have a solution ? Here is my code :<HTML><SCRIPT>function insertScript(){ var sScript="<script type='text/javascript'>"; sScript = sScript + "alert('Hello from inserted script.')"; sScript = sScript + "</script" + ">"; ScriptDiv.innerHTML = sScript;}</SCRIPT><BODY onload="insertScript();"> <DIV ID="ScriptDiv"> </DIV></BODY></HTML>

Lucas 2010-08-05 19:57:09

Lucas: you're still trying to insert script using *innerHTML*, which isn't possible. You need to use the *createElement* function, I've added an example to my answer.

Andy E 2010-08-05 20:13:43

Thanks a lot ! I've been trying it on my issue since yesterday and now it works. Thanks again =)

Lucas 2010-08-06 16:48:24

In fact I have still a problem. My ad is now displayed but it gets rid of the rest of the HTML page when the code is executed, whereas I just want it to be added to the div and displayed in the page after it was loaded. Can you think of a way to do that ?

Lucas 2010-08-06 17:07:04

There is a document.write in the JS of google. Seems like it can not work.

Lucas 2010-08-06 20:00:04

@Lucas: that depends, what does it write to the document? You could substitute the *document.write* with DOM creation methods to create the element that would get written to the DOM normally.

Andy E 2010-08-06 21:12:48

I would need a solution that is generic because it should be ok for other scripts in the future. I mean it would mean be able to parse the js code of each ad and replace the document.write. My current problem is here: http://stackoverflow.com/questions/3427130/dynamically-added-javascript-overwrite-the-html-page-view-not-the-code

Lucas 2010-08-07 01:05:04

ansaurus

tags:

views:

answers:

add javascript into a html page with jquery

related questions