Есть ли какой-либо метод/способ в javascript для динамического добавления дочернего узла в элемент списка?
Если у меня есть неупорядоченный список, как
<ul id="list">
<li>Helo World-1</li>
<li>Helo World-2</li>
<li>Helo World-3</li>
</ul>
Я хочу добавить в него элемент подсписка динамически. Есть ли какой-либо метод в javascript для этого. Как я мог это сделать. редактировать Мне нужен элемент на следующем уровне, т. е. суб-список мира Helo, который я упомянул в OP тоже, что-то вроде как под. Еще одна проблема заключается в том, что мне нужно, чтобы элементы были постоянной частью моего кода.
<ul id="list">
<li>Helo World-1</li>
<li>Helo World-2</li>
<li>Helo World-3</li>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</ul>
4 ответов
использование чистых методов DOM:
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Your list item text"));
добавить элемент списка в конец списка:
ul.appendChild(li);
чтобы вставить элемент списка между существующими элементами списка (обратите внимание, что в этом примере вы должны дать существующему элементу списка идентификатор):
ul.insertBefore(li, document.getElementById("list_item_id"));
обновление
если вы хотите добавить вложенный список, вам нужно добавить его в элемент списка, а не непосредственно внутри списка, чтобы он был действительным:
var lis = ul.getElementsByTagName("li");
var lastLi = lis[lis.length - 1];
var nestedUl = document.createElement("ul");
var nestedLi = nestedUl.appendChild(document.createElement("li"));
nestedLi.appendChild(document.createTextNode("One"));
lastLi.appendChild(nestedUl);
Я создал образец в jsfiddle
var el = document.getElementById("list");
var li = document.createElement("li");
li.innerHTML = "item";
el.appendChild(li);
вы можете пройти через w3schools дом в HTML ссылка чтобы увидеть, как мы можем манипулировать HTML-элементами с помощью javascript.
но я думаю, что более чистый способ будет использовать стороннюю библиотеку, такую как jQuery что позволит гораздо проще манипулировать dom.
ex: если использовать jQuery, это будет так же просто, как
$("<li>...</li>").appendTo("#list")
изменить: Основанный на вашем редактировать вы можете попробовать это,
var ul = document.getElementById("list");
ul.children[2].innerHTML = "<ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>";
это будет 3-й <li>
на <ul>
и добавьте к нему подлист
$('<li>...</li>').appendTo($('#list')); /* in jquery */
в противном случае прямой js
var mylist = document.getElementById('list');
mylist.appendChild(document.createElement('li'));
Примечание: Если вам нужно установить также текст
var mylist = document.getElementById('list');
var newli = document.createElement('li');
newli.innerHTML('Helo World ' + mylist.getElementsByTagName('li').length + 1);
mylist.appendChild(newli);
AFAIK, нет эквивалентного объекта HTML DOM для списка. В любом случае вы можете использовать innerHTML:
var list = document.getElementById("list");
var item = "<li>New Item</li>";
list.innerHTML += item;