Jquery - Dynamically load html and script code

Question

How can I dynamically load the following HTML/JS into the DOM:

    <div id="googleDFP" class="googleDFPAD">
        <script>googletag.cmd.push(function() {googletag.display('googleDFP');});</script>
    </div>

I've no issues appending some HTML to the DOM but I'm unsure how I can also append the script into the DIV.

I want to append this to a DIV called:

<div id="bannerDIV"></div>

The following doesn't work:

$('#bannerDIV').append('<div id="googleDFP" class="googleDFPAD"><script>googletag.cmd.push(function() {googletag.display('googleDFP');});</script></div>');

Note: I need the script to be active once loaded.

thanks for any ideas :)

You have quotes that aren't escaped around 'googleDFP'.

Waynn Lue
– Waynn Lue

2015-03-08 00:49:06 +00:00
Commented Mar 8, 2015 at 0:49 — Waynn Lue
– Waynn Lue, Commented Mar 8, 2015 at 0:49

fatih · Accepted Answer · 2015-03-08 00:51:32Z

1

It's because of a syntax error. You should be careful about what quotes you have in append text. Try following:

$('#bannerDIV').append('<div id="googleDFP" class="googleDFPAD"> <script>googletag.cmd.push(function() {googletag.display(\'googleDFP\');});</script></div>');

answered Mar 8, 2015 at 0:51

fatih

1,0101 gold badge8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JFK · Accepted Answer · 2015-03-08 01:15:45Z

You could create a (vanilla javascript) function that creates the div and the script elements like :

function googleDFP(divTarget) {
    var div = document.createElement('div');
    div.setAttribute("id", "googleDFP");
    div.setAttribute("class", "googleDFPAD");
    var myScript = document.createElement('script');
    myScript.innerHTML = "googletag.cmd.push(function() {googletag.display('googleDFP');});";
    document.getElementById(divTarget).appendChild(div);
    document.getElementById("googleDFP").appendChild(myScript);
}

This function accepts the target div ID as argument. Then call that function any time you want to append those elements to any other element passing the ID of the target element like

googleDFP("bannerDIV");

Collectives™ on Stack Overflow

Jquery - Dynamically load html and script code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related