Dynamically adding script tag to a DIV

Tarik Monem

Hey everyone,

I'm trying to add javascript tags into a specific DIV so that I can use a variable to change out the script tags source and use it as a type of "javascript-include"

I found a tutorial that made it look fairly simple, but I can not get it to work so far.

Here's the code for the DIV:

Expand|Select|Wrap|Line Numbers

 
    <div id="myDepartmentDiv" class="myDepartmentDiv">

        <span>
 
        </span>

      </div>

I use an alert function to check if the correct string is being sent, which it is sending the correct information and the variable of "whichDept" is being sent correctly as well which the alert message proves to be true.

Here's the code for the dynamic javascript insert:

Expand|Select|Wrap|Line Numbers

 
function myWhichDepartmentFunction(whichDept,someVar1,someVar2) 

{

    if(whichDept=='1')

    {

        alert(someVar1);

        var myDepartmentDivID = document.getElementsByTagName("myDepartmentDiv")[0];         

        var newScript = document.createElement('script');

        newScript.type = 'text/javascript';

        newScript.onload=scriptLoaded;

        newScript.src = 'js_files/' + someVar1 +'.js';

        myDepartmentDivID.replaceChild(newScript);

        var myDepartmentDivID2 = document.getElementsByTagName("myDepartmentDiv")[0];         

        var newScript2 = document.createElement('script');

        newScript2.type = 'text/javascript';

        newScript2.onload=scriptLoaded;

        newScript2.src = 'js_files/' + someVar2 + '.js';

        myDepartmentDivID2.appendChild(newScript2);    

    }

}

I have used this same logic before with href tags successfully but I can not get a script tag to work.

I have also attempted using innerHTML method:

Expand|Select|Wrap|Line Numbers

 
    {

        alert(someVar1);

        var myDepartmentDivID = document.getElementsByTagName("myDepartmentDiv")[0];         

        var newScript = document.createElement('script');

        newScript = '';

        newScript += "<script type=javascript src='" + someVar1 + "'.js></script>";

        myDepartmentDivID.innderHTML = newScript;

        var myDepartmentDivID2 = document.getElementsByTagName("myDepartmentDiv")[0];         

        var newScript2 = document.createElement('script');

        newScript2 = '';

        newScript2 += "<script type=javascript src='" + someVar2 + "'.js></script>";

        myDepartmentDivID.innderHTML = newScript2;    

    }

The thing that puzzles me, is that I use the exact same logic on another page, yet it works with a href tag. Why?

Expand|Select|Wrap|Line Numbers

 
function showDetail(evt, k) 

{

//    showDetailFeaturedArtist(k);

    div2 = document.getElementById("extraDetails2");

    div2.innerHTML = "";

    div2.innerHTML = "<table width=300px><tr><td>"

    //alert(k);

    for(k; k < musics.length ; k++)

    {

    if (musics[k].nodeType==1)

        { 

            Musicvar = musics.item(k);

            // alert('getshere');

           attr1 = Musicvar.getAttribute("songname");

           attr2 = Musicvar.getAttribute("songurl");

            attr3 = Musicvar.getAttribute("id");

            div2.innerHTML += "<a href='#extraDetails"+ attr2 +"' target=_blank>" + attr1 + "</a><br>";

                if(attr3 == "endepisode")

                {

                    break;

                }

        }

    }

    div2.innerHTML += "</td></tr></table>";

}

And this last piece of code retrieves data from an xml file that I insert into the html div without refresh or submit or anything.

The first one should be no big deal. Can anyone see why the first or second set of code would not work?

iam_clint

append it to the body instead of a div.

document.body.appendChild(whatever);

bbroerman38

I have a similar item.

I am creating a set of nodes, and trying to add a self-referring event handler:

Expand|Select|Wrap|Line Numbers

 var objframespan = document.createElement("span");            
 
if( isIE )

    objframespan.className = 'bbphotoimageframe';

else

    objframespan.setAttribute('class','bbphotoimageframe');
 
if( isIE )

{

  objframespan.onClick = function() { setActivePicture(objframespan)};

  objframespan.onMouseOver = function() { setMouseOver(objframespan)};

  objframespan.onMouseOut = function() { setMouseOut(objframespan)};

}

else

{                

  objframespan.setAttribute('onclick','setActivePicture(this);');

  objframespan.setAttribute('onMouseOver','setMouseOver(this);');

  objframespan.setAttribute('onMouseOut','setMouseOut(this);');

}

Now, the non-ie code works in FF, Safari, and Opera, but did not work in IE. Nor does the IE code block above... I have resorted to using innerHTML, but as it is not compliant, I would really like an alternative...

Suggestions, anyone?

acoder

onClick, onMouseOver and onMouseOut should be lower-case, e.g. onclick.

Dynamically adding script tag to a DIV

re: Dynamically adding script tag to a DIV

re: Dynamically adding script tag to a DIV

re: Dynamically adding script tag to a DIV

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about