Изменение страницы посредством JavaScript
JavaScript динамические списки
Немного про динамическое добавление элементов, с помощью javascript, на страницу.В прошлый раз я немного писал про циклы.
Сейчас будет небольшой пост, о том...впрочем сами увидите.
<ul id='list'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Дадим пользователю возможность добавить столько элементов LI, пока его не затошнит их.
Добавим под список следующую кнопку:
<input onclick='addList()' type='button' value='Добавить элемент в список' />
Как видите, при клике на кнопку (onclick) должна сработать функция addList();.
Теперь посмотрим что эта за функция:
function addList(){
var list = document.getElementById('list');
var li = document.createElement('LI');
li.innerHTML = list.getElementsByTagName('LI').length + 1;
list.appendChild(li);
}
var list = document.getElementById('list');
var li = document.createElement('LI');
li.innerHTML = list.getElementsByTagName('LI').length + 1;
list.appendChild(li);
}
В общем, с объяснением может и не очень, но разобраться можно ^).
И, добавим функцию удаления элементов списка:
function remove(){
var list = document.getElementById('list');
var l = list.getElementsByTagName('LI').length - 1;
var li = document.getElementsByTagName('li')[l];
list.removeChild(li);
}
var list = document.getElementById('list');
var l = list.getElementsByTagName('LI').length - 1;
var li = document.getElementsByTagName('li')[l];
list.removeChild(li);
}
http://severus.name/examples/dom.html - пример
Категория: JavaScript | Автор: Severus | Источник: Изменение DOM | Дата: 03.05.2010