Создание списка через JS
Добры день. Возможно мой вопрос покажется детским, но меня очень волнует вопрос как создавать многоуровневые списки по средствам JS ?
Как сделать добавление подпунктов списка?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List</title>
</head>
<body>
<div id="list"></div>
<script>
var div = document.getElementById('list');
var ul = document.createElement('ul');
var li = document.createElement('li');
div.appendChild(ul);
ul.appendChild(li);
li.innerHTML = "Эта строка списка создана в JS";
li.innerHTML = "Эта должна была быть вторая строка созданая в JS";
</script>
</body>
</html>
У меня вышло так что первый элемент списка переопределился второй строкой, а как создать новую строку. (или вообще как создать список из li [n] элементов? Я понимаю, что список по своему подобию есть массивом данных, но как сделать ориентацию в этом массиве не пойму. |
var div = document.getElementById('list');
var ul = document.createElement('ul');
div.appendChild(ul);
var data = ["Первая строка", "Вторая строка", "n строка"];
for (var i = 0, ln = data.length; i < ln; i++) {
var li = document.createElement('li');
li.innerHTML = data[i];
ul.appendChild(li);
}
|
Спасибо, за помощь. А если скажем надо обратиться к 3 строке данного списка, то как это сделать ?
|
Пиши в каждый элемент id из счетчиков,
id="prefix-'+i+'" тогда elem=document.getElementById('prefix-3'); вернет искомое Для вложенных - влагай. То есть id="prefix-'+i+'-'+j+'+'y'+" и так далее, что значит elem=document.getElementById('prefix-3-5-1'); вернет элемент 3 на пятом уровне уровня 1, то есть ***нешься. ))) |
CiliZ,
Цитата:
var html = '<ul><li>'+data.join('</li><li>')+'</li></ul>';
И вставляй куда хочешь. Правда без идентификаторов. |
| Часовой пояс GMT +3, время: 08:51. |