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

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

<h2>Использование свойств <b>firstChild</b>, <b>lastChild</b> и
	методов <b>appendChild</b>, <b>replaceChild</b></h2>
<br />
<form>
   <label>Введите текст, который бедет добавлен или заменен в элементе:</label><br />
    <input type="text" name="input" size="50" /><br />
    <input type="button" value="Вставить в начало"
   onclick="prepend(this.form)" /> <input type="button"
   value="Добавить в конец" onclick="append(this.form)" /><br />
    <input type="button" value="Заменить первый элемент"
   onclick="replaceFirst(this.form)" /> <input type="button"
   value="Заменить последний элемент" onclick="replaceLast(this.form)" />
</form>
<ol id="myList">
   <li>Элемент 1</li>
   <li>Элемент 2</li>
   <li>Элемент 3</li>
   <li>Элемент 4</li>
</ol>
Скопировать в буфер

© Copyright 2008-2012 by KDG