Пример работы с объектной моделью документа 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>

<h1>Пример работы с объектной моделью документа DOM на JavaScript</h1>
<br />
<h2>Использование методов <b>appendChild()</b>, <b>removeChild()</b>, и <b>replaceChild()</b></h2>
<br />
Список элементов
<ul id="myUL">
<li>Первый элемент</li>
<li>Второй элемент</li>
</ul>
<form>
   Введите текст, который бедет добавлен или заменен в элементе: 
   <input type="text" name="input" size="30" /><br />
    <input type="button" value="Добавить" onclick="append(this.form)" />
    <input type="button" value="Заменить последний" onclick="replace(this.form)" />
    <input type="button" value="Restore List" onclick="restore()" />
</form>
Скопировать в буфер

© Copyright 2008-2012 by KDG