The Document Object Model (DOM), Part 5: The replaceNode Method | 2

The Document Object Model (DOM), Part 4 (6)

The swapNode Method

The swapNode method is much more intuitive than the removeNode method and just as intuitive as the replaceNode methods. While the removeNode method just removes the specified element and makes its descendents children of their grandfather, the swapNode swaps two whole subtrees that are rooted at the specified elements. The swapNode method returns the whole subtree rooted at method-owner node. Here is a script that demonstrates how the swapNode works:

<SCRIPT LANGUAGE="JavaScript">
<!--
var msg = "";
function printChildren()  {
   childCount = bodyNode.childNodes.length;
   msg += "bodyNode.childNodes.length = " + bodyNode.
     childNodes.length + "\n" ;
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
   for(var i = 0; i < childCount; i++)  {
   msg += "bodyNode.childNodes[i].nodeName = " + bodyNode.
     childNodes[i].nodeName + "\n";
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
   }
}
printChildren();
msg += "Swapping Paragraph 3 with Paragraph 2\n";
var b = p2Node;
var swappedNode = p3Node.swapNode(b);
msg += "swappedNode.nodeName = " + swappedNode.nodeName + "\n";
msg += "swappedNode.childNodes.length = " + swappedNode.
  childNodes.length + "\n";
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
msg += "p2Node.nodeName = " + p2Node.nodeName + "\n";
printChildren();
alert(msg);
// -->
</SCRIPT>

Try it out and see the difference with the original page. See how paragraph 3 is swapped with paragraph 2, together with its image, table and text. Also, notice from the alert box that the number of top level children is unchanged.

You can use the swapNode method instead of the replaceNode method. The browser does accept a new node to be plugged instead of the specified existing node. Look at the following script:

<SCRIPT LANGUAGE="JavaScript">
<!--
var msg = "";
function printChildren()  {
   childCount = bodyNode.childNodes.length;
   msg += "bodyNode.childNodes.length = " + bodyNode.
     childNodes.length + "\n" ;
  // (The above two lines should be joined as one line.
    // They have been split for formatting purposes.)
   for(var i = 0; i < childCount; i++)  {
   msg += "bodyNode.childNodes[i].nodeName = " + bodyNode.
     childNodes[i].nodeName + "\n";
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
   }
}
printChildren();
msg += "Swapping Paragraph 3 with a new text\n";
var b = document.createTextNode("This is a swapped in text");
var swappedNode = p3Node.swapNode(b);
msg += "swappedNode.nodeName = " + swappedNode.nodeName + "\n";
msg += "swappedNode.childNodes.length = " + swappedNode.
  childNodes.length + "\n";
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
msg += "p2Node.nodeName = " + p2Node.nodeName + "\n";
printChildren();
alert(msg);
// -->
</SCRIPT>

Now try this script. Notice that paragraph 3 is removed and substituted with a new text, "This is a swapped in text". The alert box also demonstrates the change in the top level children. One P type element changed to a text node (#text).

Produced by Yehuda Shiran and Tomer Shiran

Created: July 5, 1999
Revised: July 5, 1999

URL: https://www.webreference.com/js/column43/swap.html