Начало Кнопки Работа с объектной моделью документа DOM на JavaScript

...

.

1. Элемент 1
2. Элемент 2
3. Элемент 3
4. Элемент 4

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

<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>