Chapter 12: Objects and the DOM

Inserting Nodes

See it run: Inserting Nodes

Script 12.7

This HTML adds another radio button to allow a third option -- inserting text before another paragraph.

Script 12.8

With this JavaScript, 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);
}

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

return false;
}

Contents:

Inserting Nodes

Script 12.7

Script 12.8