AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

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