Hekp me move a div!

February 24, 2007 4:02 PM

Javascript Noob: I need to move one div inside of another div that is elsewhere on the page. How do I do this?

I've got an advertiser who places ads on my page using javascript. Unfortunately, his javascript is weird in IE6, and doesn't necessarily place the ad in the correct div. (It depends on the order in which his included javascript files download relative to mine.) It has a tendency to drop the ad outside of the positioned div i've created for it, in fact fairly far down the page.

I know what the div id is for the ad, and i know what div i want it to be moved to, and i know exactly when and where the advertiser places the div on the page (even in IE6), but how do i move it there?

All of my searches seem to return stuff about animation, etc. Not about re-organizing the DOM itself.

let's say for the sake of clarity:
my div id="my_div"
and the advertiser's div="ad_div"

Any ideas?

posted by Freen to computers & internet (3 comments total)

Keep in mind that it's possible that the ad is being placed in the right div in the DOM, but is using CSS positioning rules which cause it to appear physically outside that div.

But, if that's not the case, try something like:
var dest = document.getElementById("my_div");
var orig = document.getElementById("ad_div");
orig.parentNode.removeChild(orig);
dest.appendChild(orig);

(The removeChild line is optional here, but it makes it a little cleaner and more explicit.)
posted by IshmaelGraves at 4:28 PM on February 24, 2007

Sure you could do this via the DOM but meh.

var my = document.getElementById("my_div")
var ad = document.getElementById("ad_div")
my.innerHTML = ad.innerHTML;
ad.innerHTML = "";

And thus ends my hacky, untested method for doing this, note that it doesn't actually move the div, so much as just copy it into the one of your choosing. In fact, there HAS to be a better way of doing it...


On Preview: yes, thats the DOM way of doing it...
posted by cschneid at 4:31 PM on February 24, 2007

sweet. Ishmael, thanks! that looks to be exactly what i'm looking for. I'll test it out.

It is decidedly not a CSS issue. What's happening is that when IE6 downloads their javascript before it gets my javascript, their div gets placed before i can write my changes to the DOM.
posted by Freen at 4:46 PM on February 24, 2007