Chapter 12: Objects and the DOM

Replacing Nodes

Script 12.9

This HTML adds the Replace node radio button to previous examples.

Script 12.10

This JavaScript gives users the complete range of node manipulation. They 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);
}

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

return false;
}

Contents:

Replacing Nodes

Script 12.9

Script 12.10