javascript question, DOM api

lightnin

ok here's the deal. lets say i have two div tags and i want to swap the content of these two divs with javascript. it's not too hard to do using innerHTML to get/set the content of those divs, but i'm running into cross-browser compatibility issues by using innerHTML. namely, newer than 1.3 safari on mac. i have to deal with this, because about 25% of my audience with this will be on exactly that browser. i'm at my wits end here, stuff that *should* work just doesnt.

[HTML]

<div id="divOne">
<p> Some content here...</p>
</div>

<div id="divTwo">
<p> Another bit of content here</p>
</div>

[/HTML]

what i want is to click a button and put divOne's content into divTwo and vice versa, all in one step, without setting content using innerHTML.

any ideas?

lightnin

gettin closer.... this is aggravating.


[PHP]

function moveUp(userId, moduleId, modDiv) {
var elem = document.getElementById(modDiv);
var elemParent = elem.parentNode;
var parentDiv = elemParent.parentNode;
var modulePosition = parseInt(elemParent.id.substring('string'.length));
alert(modulePosition + '\n' + parentDiv.id);
if (modulePosition > 1) {
var fromDivOne = document.createDocumentFragment(elem.innerHTML);
var elemTwo = parentDiv.childNodes[modulePosition - 1];
alert(elemTwo.innerHTML);
var fromDivTwo = document.createDocumentFragment(elemTwo.innerHTML);
parentDiv.replaceChild(fromDivTwo, parentDiv.childNodes[modulePosition]);
//alert(fromDivOne + '\n' + parentTwo.childNodes[modulePosition].id);
//parentTwo.replaceChild(fromDivOne, parentTwo.childNodes[1]);
}
}

funtion moveDown(userId, moduleId, modDiv){
//to be written
}
[/PHP]

[HTML]
<div id="boxOne">
<div id="swappableOne">
<div id="buttons">
<img alt="Up" src="buttonSrc" onclick="moveUp('userId', '1', 'swappableOne')" border="0">
<img alt="Down" src="buttonSrc" onclick="moveDown('userId', '1', 'swappableOne')" border="0">
</div>


<div id="divBody">
stuff....
</div>

</div>




<div id="boxTwo">
<div id="swappableTwo">
<div id="buttons">
<img alt="Up" src="buttonSrc" onclick="moveUp('userId', '2', 'swappableTwo')" border="0">
<img alt="Down" src="buttonSrc" onclick="moveDown('userId', '2', 'swappableTwo')" border="0">
</div>


<div id="divBody">
other stuff....
</div>

</div>

</div>
[/HTML]

still glitchy but gettin closer. i'm definitely learning more about javascript. i dont like it lol

lightnin

i got it. i'll post the code here in just a few minutes. i made it far too complicated.:rolleyes2


basically:

        function swapNodes(node1, node2) {
		var itemtmp = node1.cloneNode(1);
		var parent = node1.parentNode;
		node2 = parent.replaceChild(itemtmp, node2);
		parent.replaceChild(node2, node1);
		parent.replaceChild(node1,itemtmp);
		itemtmp = null;
	}