2/5/11

Working with DOM,nodes and Objects : Inserting Nodes (part 3)

This Post is a continuation of my previous posts ie Adding Nodes and Deleting Nodes. IN this post i am tell how you can add nodes between any two nodes.



*----------------------*----------------------*---------------------*

HTML CODE: 

<html>
<head>
    <title>Inserting Nodes</title>
    <script type="text/javascript" src="script.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.js (javascript code):



window.onload = initAll;
var nodeChangingArea;

function initAll() {
    document.getElementsByTagName("form")[0].onsubmit = 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.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;
            }
        default:
            alert("No valid action was chosen");
    }
    
    document.getElementById("grafCount").options.length = 0;

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

    return false;
}


Now With the above Code u can do the following...


Already added Nodes


A node Added before 2nd line

In the above Pic. you can see that a node "3rd Line" is added before "2nd line". Like this you can also add any node anywhere.  

SHARE THIS POST: