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

Использование методов appendChild(), removeChild(), replaceChild()

Список элементов

• Первый элемент
• Второй элемент

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

<script type="text/javascript">
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);
   }
}
</script>
<ul id="myUL">
   <li>Первый элемент</li>
   <li>Второй элемент</li>
</ul>
<form>
    <p>Введите текст, который бедет добавлен или заменен в элементе:</p>
    <p>
        <input type="text" name="input" size="30">
    </p>
    <p>
        <input type="button" value="Добавить" onclick="append(this.form)">&nbsp;&nbsp;
        <input type="button" value="Заменить последний" onclick="replace(this.form)">&nbsp;&nbsp;
        <input type="button" value="Восстановить список" onclick="restore()">
    </p>
</form>