Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

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


.