Есть ли какой-либо метод/способ в 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>
7
dynamic javascript list

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);
20

Я создал образец в 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> и добавьте к нему подлист

2
$('<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);
1

AFAIK, нет эквивалентного объекта HTML DOM для списка. В любом случае вы можете использовать innerHTML:

var list = document.getElementById("list");
var item = "<li>New Item</li>";
list.innerHTML += item;
0