<script>
// Created Feb 24, 2014 by Troy Whorten
function toggleChild() {
div1 = document.getElementById("div1");
div2 = document.getElementById("div2");
target = document.getElementById("target");
if (target.parentNode.isEqualNode(div1))
div2.appendChild(target);
else
div1.appendChild(target);
}
function createChild() {
div1 = document.getElementById("div1");
div2 = document.getElementById("div2");
target = document.getElementById("target");
sibling = document.createElement('div');
sibling.innerHTML = "Sibling";
sibling.setAttribute("class","sibling");
if (target.parentNode.isEqualNode(div1))
div1.appendChild(sibling);
else
div2.appendChild(sibling);
}
function killSiblings() {
siblings = document.querySelectorAll('.sibling');
for(var i = 0; i < siblings.length; i++)
{
siblings[i].parentNode.removeChild(siblings[i]);
}
}
</script>
<div id="div1">
<p id="target">TARGET CHILD</p>
</div>
<div id="div2">
</div>
<br>
<button onClick='toggleChild()'>Move Child</button>
<button onClick='createChild()'>Give Target Sibling</button>
<button onClick='killSiblings()'>Kill all Siblings</button>