Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.07.2016, 09:49
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Создание списка через 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] элементов?
Я понимаю, что список по своему подобию есть массивом данных, но как сделать ориентацию в этом массиве не пойму.
Ответить с цитированием
  #2 (permalink)  
Старый 20.07.2016, 12:58
Аспирант
Отправить личное сообщение для CiliZ Посмотреть профиль Найти все сообщения от CiliZ
 
Регистрация: 04.01.2013
Сообщений: 34

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 (permalink)  
Старый 20.07.2016, 15:35
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Спасибо, за помощь. А если скажем надо обратиться к 3 строке данного списка, то как это сделать ?

Последний раз редактировалось Black_Star, 20.07.2016 в 16:02.
Ответить с цитированием
  #4 (permalink)  
Старый 20.07.2016, 20:25
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Пиши в каждый элемент id из счетчиков,

id="prefix-'+i+'"

тогда

elem=document.getElementById('prefix-3');

вернет искомое

Для вложенных - влагай. То есть

id="prefix-'+i+'-'+j+'+'y'+"

и так далее, что значит

elem=document.getElementById('prefix-3-5-1');

вернет элемент 3 на пятом уровне уровня 1, то есть ***нешься. )))
Ответить с цитированием
  #5 (permalink)  
Старый 20.07.2016, 20:28
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

CiliZ,

Цитата:
var data = ["Первая строка", "Вторая строка", "n строка"];
Это вот так делается

var html = '<ul><li>'+data.join('</li><li>')+'</li></ul>';


И вставляй куда хочешь. Правда без идентификаторов.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание JS конструктора sheckler Работа 2 25.05.2015 21:24
Получение background-image через js в ie wondertalik Javascript под браузер 3 13.12.2014 19:34
Вставка HTML кода и JS кода через innerHTML zhurchik AJAX и COMET 1 31.10.2014 17:32
Вывыод контента через JS inet_boy Элементы интерфейса 0 18.11.2013 03:00
Не работает JS после подгрузки div через ajax BoB AJAX и COMET 3 09.12.2011 03:03