JavaScript Examples Bible - UserWorks Technologies

56 JavaScript Examples Bible: The Essential Companion to JavaScript Bible
The append() function creates a new LI element and then uses the
appendChild() method to attach the text box text as the displayed text for the
item. The nested expression, document.createTextNode(form.input.value),
evaluates to a legitimate node that is appended to the new LI item. All of this occurs
before the new LI item is added to the document. In the final statement of the function,
appendChild() is invoked from the vantage point of the UL element — thus
adding the LI element as a child node of the UL element.
Invoking the replaceChild() method in the replace() function utilizes some
of the same code. The main difference is that the replaceChild() method requires
a second parameter: a reference to the child element to be replaced. This demonstration
replaces the final child node of the UL list, so the function takes advantage
of the lastChild property of all elements to get a reference to that final nested
child. That reference becomes the second parameter to replaceChild().
Listing 15-21: Various Child Methods
appendChild(), removeChild(), and replaceChild() Methods
function append(form) {
if (form.input.value) {
var newItem = document.createElement(“LI”)
newItem.appendChild(document.createTextNode(form.input.value))
document.getElementById(“myUL”).appendChild(newItem)
}
}
function replace(form) {
if (form.input.value) {
var newItem = document.createElement(“LI”)
var lastChild = document.getElementById(“myUL”).lastChild
newItem.appendChild(document.createTextNode(form.input.value))
document.getElementById(“myUL”).replaceChild(newItem, lastChild)
}
}
function restore() {
var oneChild
var mainObj = document.getElementById(“myUL”)
while (mainObj.childNodes.length > 2) {
oneChild = mainObj.lastChild
mainObj.removeChild(oneChild)
}
}
Child Methods
Here is a list of items:
First Item
elementObject.appendChild()