Previous Page
Next Page

Replacing Nodes

While you can always delete existing nodes and insert new nodes, it's simpler to just replace nodes if that's what you want. Scripts 12.9 and 12.10 show how you can replace one node with another. Figure 12.7 shows the replacement process.

Script 12.9. Adding the Replace node radio button to the HTML rounds out our node manipulation examples.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Replacing Nodes</title>
     <script type="text/javascript" language="Javascript" src="script05.js">
     </script>
</head>
<body>
<form action="#">
     <p><textarea id="textArea" rows="5" cols="30"></textarea></p>
     <p><label><input type="radio" name="nodeAction" />Add node</label>
     <label><input type="radio" name="nodeAction" />Delete node</label>
     <label><input type="radio" name="nodeAction" />Insert before node</label>
     <label><input type="radio" name="nodeAction" />Replace node</label> </p>
     Paragraph #: <select id="grafCount"> </select>
     <input type="submit" value="Submit" />
</form>
<div id="modifiable"> </div>
</body>
</html>

Script 12.10. And finally, the user can add, delete, and replace any text on the page.

window.onload = initAll;
var nodeChangingArea;

function initAll() {
     document.getElementsByTagName("form")[0].onsubmit = function() {return nodeChanger();}

     nodeChangingArea = document.getElementById("modifiable");
}

function addNode() {
     var inText = document.getElementById("textArea").value;
     var newText = document.createTextNode(inText);

     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);

     nodeChangingArea.appendChild(newGraf);
}

function delNode() {
     var delChoice = document.getElementById("grafCount").selectedIndex;
     var allGrafs = nodeChangingArea.getElementsByTagName("p");
     var killGraf = allGrafs.item(delChoice);

     nodeChangingArea.removeChild(killGraf);
}

function insertNode() {
     var inChoice = document.getElementById("grafCount").selectedIndex;
     var inText = document.getElementById("textArea").value;

     var newText = document.createTextNode(inText);
     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);

     var allGrafs = nodeChangingArea.getElementsByTagName("p");
     var oldGraf = allGrafs.item(inChoice);

     nodeChangingArea.insertBefore(newGraf,oldGraf);
}

function replaceNode() {
     var inChoice = document.getElementById("grafCount").selectedIndex;
     var inText = document.getElementById("textArea").value;

     var newText = document.createTextNode(inText);
     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);

     var allGrafs = nodeChangingArea.getElementsByTagName("p");
     var oldGraf = allGrafs.item(inChoice);

     nodeChangingArea.replaceChild(newGraf,oldGraf);
}

function nodeChanger() {

     var actionType = -1;
     var currentPgraphCount = nodeChangingArea.getElementsByTagName("p").length;
     var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;

     for (var i=0; i<radioButtonSet.length; i++) {
        if (radioButtonSet[i].checked) {
           actionType = i;
        }
     }

     switch(actionType) {
        case 0:
           addNode();
           break;
        case 1:
           if (currentPgraphCount > 0) {
              delNode();
              break;
           }
        case 2:
           if (currentPgraphCount > 0) {
              insertNode();
              break;
           }
        case 3:
           if (currentPgraphCount > 0) {
              replaceNode();
              break
           }
        default:
           alert("No valid action was chosen");
     }

     document.getElementById("grafCount"). options.length = 0;

     for (i=0; i<nodeChangingArea.getElements ByTagName("p").length; i++) {
        document.getElementById("grafCount"). options[i] = new Option(i+1);
     }

     return false;
}

To replace nodes:

  • nodeChangingArea.replaceChild (newGraf,oldGraf);
    

    The only line in this script that should be new to you is this one (see the rest of this chapter for explanations about the rest of the script). And in a similar fashion to the last task, all we need to do is call replaceChild() with two parameters: the paragraph we want to swap in and the paragraph we want to swap out.

Tip

  • This chapter is not by any means a thorough discussion of node manipulationit's just a sample to get you started. If you want more documentation of all the available properties and methods, check out the W3C specification mentioned at the beginning of the chapter.


Figure 12.7. Here, we've replaced the third paragraph (left) with new text (right).



Previous Page
Next Page