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 11.7 (the HTML) and 11.8, you’ll be able to choose where you want your new nodes to appear. In Figure 11.6, you can see how the new node gets inserted.

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


Script 11.7. Another radio button and some script changes allow a third option—inserting text before another paragraph.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Inserting Nodes</title>
     <script type="text/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>

Script 11.8. The user can now add text anywhere on the page.
window.onload = initAll;
var nodeChgArea;

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

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

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

     nodeChgArea.appendChild(newGraf);
}

function delNode() {
     var grafChoice = document.getElementById("grafCount").selectedIndex;
     var allGrafs = nodeChgArea.getElementsByTagName("p");
     var oldGraf = allGrafs.item(grafChoice);

     nodeChgArea.removeChild(oldGraf);
}

function insertNode() {
     var grafChoice = 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 = nodeChgArea.getElementsByTagName("p");
					var oldGraf = allGrafs.item(grafChoice);
					nodeChgArea.insertBefore(newGraf,oldGraf);
}
function nodeChanger()  {
     var actionType = -1;
     var pGrafCt = nodeChgArea.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 (pGrafCt > 0) {
              delNode();
              break;
           }
        case 2:
           if (pGrafCt > 0) {
              insertNode();
              break;
           }
        default:
           alert("No valid action was chosen");
     }

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

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

     return false;
}

To insert a node:

1. 
var grafChoice = 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 (grafChoice) 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 = nodeChgArea.getElementsByTagName("p");
var oldGraf = allGrafs.item(grafChoice);



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. 
nodeChgArea.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(), but that’s not the case. If you want to add something to the end of the page, you need to use appendChild().


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.149.249.127