Previous Page
Next Page

Inserting Nodes

Along with wanting to delete nodes other than at the end of the document, you're likely to want to add nodes somewhere other than the end. With Scripts 12.7 and 12.8, you'll be able to choose where you want your new nodes to appear. In Figure 12.6, you can see how the new node gets inserted.

Script 12.7. Another radio button and some script changes allow a third optioninserting text before another paragraph.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Inserting Nodes</title>
     <script type="text/javascript" language="Javascript" src="script04.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></p>
     Paragraph #: <select id="grafCount"> </select>
     <input type="submit" value="Submit" />
</form>
<div id="modifiable"> </div>
</body>
</html>

Figure 12.6. To insert a paragraph, click the Insert before node radio button, select the desired paragraph you want for the insertion point (left), enter your text, and then click Submit (right).

[View full size image]


Script 12.8. The user can now add text anywhere 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 nodeChanger() {
     var actionType = -1;
     var currentPgraphCount = nodeChangingArea. getElementsByTagName("p").length;
     var radioButtonSet = document.getElements ByTagName("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;
           }
        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 insert a node:

1. 
var inChoice = document. getElementById("grafCount"). selectedIndex;
var inText = document. getElementById("textArea").value;



In order to insert a paragraph, we need to know two things: the place where the user wants it inserted (inChoice) and the text they want inserted (inText).

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



Here's our by-now standard way of creating a new paragraph node and filling it with the user's text.

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



Once again, we get all the p tags in our region, and then we store the target paragraph (the one we'll be inserting our new paragraph in front of) in oldGraf.

4. 
nodeChangingArea.insertBefore (newGraf,oldGraf);



The new paragraph is inserted by calling the insertBefore() method and passing it two parameters: the new node and the existing node that we want the new node to be inserted before (hence the name).

Tip

  • While you might think that if there's an insertBefore() there ought to be an insertAfter(), that's not the case. If you want to add something to the end of the page, you need to use appendChild().



Previous Page
Next Page