add javascript into a html page with jquery

Question

I want to add a javascript google ad but I can't insert the javascript into the div using jquery. I try to simulate my problem with this test, which is using some advice I found on stackoverflow , but it does not work.

I want <script type='text/javascript'>document.write('hello world');</script> to be inserted in the div, and "hello world" be displayed between the tag_1 and tag_2.

Here is the code :

<html>
    <head>
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
         var str="<script type='text/javascript'>document.write('hello world');";
         str+="<";
         str+="/script>";

         $('#insert_here').append(str);
         });
      </script>
    </head>
    <body>
      tag_1<br/>
      <div id="insert_here">
      </div>
      tag_2<br/>
    </body>
</html>

Tanks for your answers,

Lucas

score 2 · Answer 1 · edited May 23 '17 at 12:23

2

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);

edited May 23 '17 at 12:23

Community

1
1

answered Aug 05 '10 at 18:51

Andy E

338,112
86
474
445

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 : "; ScriptDiv.innerHTML = sScript; }

– Lucas Aug 05 '10 at 19:57
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 Aug 05 '10 at 20:13
Thanks a lot ! I've been trying it on my issue since yesterday and now it works. Thanks again =) – Lucas Aug 06 '10 at 16:48
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 Aug 06 '10 at 17:07
There is a document.write in the JS of google. Seems like it can not work. – Lucas Aug 06 '10 at 20:00
@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 Aug 06 '10 at 21:12
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 Aug 07 '10 at 01:05

score 1 · Answer 2 · answered Aug 05 '10 at 18:47

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>

score 1 · Accepted Answer · edited Feb 28 '12 at 21:46

I figured out a great solution:

Insert your Google Adsense code anywhere on your page - e.g. if your CMS only allows you to put this on the right hand side then stick it there.
Wrap a div around it with display:none style
Add some jquery code to move the div to the location you desire.

Since the javascript has already run there is no problem then with moving the block of script to wherever you'd like it to be.

e.g. if you wish to put 2 blocks of google adverts interspersed throughout your blog (say after paragraph 1 and after paragraph 4) then this is perfect.

Here's some example code:

<div id="advert1" style="display:none">
<div class="advertbox advertfont">
    <div style="float:right;">
        <script type="text/javascript"><!--
        google_ad_client = "pub-xxxxxxxxxxxxxxxxx";
        /* Video box */
        google_ad_slot = "xxxxxxxxxxxxxxxxx"
        google_ad_width = 300;
        google_ad_height = 250;
        //-->
        </script>
        <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
    </div>
</div>
</div>

<script>
$(document).ready(function() {

$('#advert1').appendTo("#content p:eq(1)");
$('#advert1').css("display", "block");

});
</script>

p.s. #content happens to be where the content starts on my CMS (Squarespace) so you can replace that with whatever you have in your CMS. This works a treat and doesn't break Google ToS.

Adsense is very strict, display:none could get you banned even if this is harmless. I would not try anything clever with Adsense ads. — PJ Brunet, Oct 13 '13 at 07:21
Good point - doesn't break the solution though - just remove the display:none - you can still use this solution to load the adverts and move them to the desired location. — Dave Hilditch, Oct 15 '13 at 08:25

add javascript into a html page with jquery

3 Answers3

Linked