<HTML>
<HEAD>
<TITLE>Waciwoci firstChild and lastChild</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// helper function for prepend() and append()
function makeNewLI(txt) {
    var newItem = document.createElement("LI")
    newItem.innerHTML = txt
    return newItem
}
function prepend(form) {
    var newItem = makeNewLI(form.input.value)
    var firstLI = document.getElementById("myList").firstChild
    document.getElementById("myList").insertBefore(newItem, firstLI)
}
function append(form) {
    var newItem = makeNewLI(form.input.value)
    var lastLI = document.getElementById("myList").lastChild
    document.getElementById("myList").appendChild(newItem)
}
function replaceFirst(form) {
    var newItem = makeNewLI(form.input.value)
    var firstLI = document.getElementById("myList").firstChild
    document.getElementById("myList").replaceChild(newItem, firstLI)
}
function replaceLast(form) {
    var newItem = makeNewLI(form.input.value)
    var lastLI = document.getElementById("myList").lastChild
    document.getElementById("myList").replaceChild(newItem, lastLI)
}
</SCRIPT>

</HEAD>
<BODY>
<H1>Waciwoci firstChild and lastChild</H1>
<HR>
<FORM>
<LABEL>Podaj tekst ktry zostanie dodany do listy lub zastpi jej wybrany 
element:</LABEL><BR>
<INPUT TYPE="text" NAME="input" SIZE=50><BR>
<INPUT TYPE="button" VALUE="Wstaw na pocztku" onClick="prepend(this.form)">
<INPUT TYPE="button" VALUE="Dodaj na kocu" onClick="append(this.form)">
<BR>
<INPUT TYPE="button" VALUE="Zastp pierwszy element" 
onClick="replaceFirst(this.form)">
<INPUT TYPE="button" VALUE="Zastp ostatni element" onClick="replaceLast(this.form)">
</FORM>
<P></P>
<OL ID="myList"><LI>Oryginalny, pierwszy element listy</LI>
<LI>Oryginalny, drugi element listy</LI>
<LI>Oryginalny, trzeci element listy</LI>
<LI>Oryginalny, czwarty element listy</LI>
<OL>
</BODY>
</HTML>