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;
}

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.

Replacing Nodes

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

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

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