Пример работы с объектной моделью документа DOM на JavaScript

Использование свойств firstChild, lastChild и методов appendChild, replaceChild

1. Элемент 1
2. Элемент 2
3. Элемент 3
4. Элемент 4

Исходный код этого примера:

<script type="text/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>
<form>
   <p>
      <label>Введите текст, который будет добавлен или заменен в элементе:<br>
         <input type="text" name="input" size="50" /></label>
   </p>
   <p>
       <input type="button" value="Вставить в начало" onclick="prepend(this.form)">&nbsp;&nbsp;
       <input type="button" value="Добавить в конец" onclick="append(this.form)">
   </p>
    <p>
        <input type="button" value="Заменить первый элемент" onclick="replaceFirst(this.form)">&nbsp;&nbsp;
        <input type="button" value="Заменить последний элемент" onclick="replaceLast(this.form)">
   </p>
</form>
<ol id="myList">
   <li>Элемент 1</li>
   <li>Элемент 2</li>
   <li>Элемент 3</li>
   <li>Элемент 4</li>
</ol>