Последние обновления

Динамическое изменение страницы с jS


Описание темы отсутсвует
Тема создана:
Ответов: 0
Просмотров: 346
Последний ответ:
Destroy
Администратор
131 7 0

Привет.И снова немного про динамическое добавление элементов, с помощью jS, на страницу.В прошлый раз я немного писал про циклы. Сейчас будет небольшой пост, о том...впрочем сами увидите.

Итак, допустим у нас есть уже такой список:

<ul id='list'>
<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); 
 
 }

В общем, с объяснением может и не очень, но разобраться можно ^).

И, добавим функцию удаления элементов списка:

function remove(){ 
var list = document.getElementById('list'); 
var l = list.getElementsByTagName('LI').length - 1;
var li = document.getElementsByTagName('li')[l];
 
list.removeChild(li);
 
}
Отредактировано автором в
Зарегистрируйтесь или авторизуйтесь что бы писать