html - how to add new <li> to <ul> onclick with javascript - Stack Overflow

admin管理员组

文章数量:1134247

How do I add a list element to an existing ul using a function from an onclick? I need it to add to this type of list ...

<ul id="list">
<li id="element1">One</li>
<li id="element2">Two</li>
<li id="element3">Three</li>
</ul> 

... another list item with the id "element4" and text "Four" under that. I tried this function but it doesn't work...

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Element 4"));
}

I don't know JQuery so Javascript only please. Thank you!!

How do I add a list element to an existing ul using a function from an onclick? I need it to add to this type of list ...

<ul id="list">
<li id="element1">One</li>
<li id="element2">Two</li>
<li id="element3">Three</li>
</ul> 

... another list item with the id "element4" and text "Four" under that. I tried this function but it doesn't work...

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Element 4"));
}

I don't know JQuery so Javascript only please. Thank you!!

• javascript
• html
• list

Share Improve this question Follow edited Feb 7, 2023 at 17:43 Benjamin Loison 5,59244 gold badges1919 silver badges3737 bronze badges asked Dec 19, 2013 at 5:16 UniUni 1,47144 gold badges1212 silver badges99 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 249

You have not appended your li as a child to your ul element

Try this

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Four"));
  ul.appendChild(li);
}

If you need to set the id , you can do so by

li.setAttribute("id", "element4");

Which turns the function into

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Four"));
  li.setAttribute("id", "element4"); // added line
  ul.appendChild(li);
  alert(li.id);
}

You were almost there:

You just need to append the li to ul and voila!

So just add

ul.appendChild(li);

to the end of your function so the end function will be like this:

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Element 4"));
  ul.appendChild(li);
}

First you have to create a li(with id and value as you required) then add it to your ul.

Javascript ::

addAnother = function() {
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    var children = ul.children.length + 1
    li.setAttribute("id", "element"+children)
    li.appendChild(document.createTextNode("Element "+children));
    ul.appendChild(li)
}

Check this example that add li element to ul.

Just use innerHTML:

function function1() {
  ul.innerHTML += `<li> four </li>`;
}

Object.assign can be used to set the textContent (and the id) of the <li> element directly, and the return value can be passed to Element#append to add the list item to the unordered list.

ul.append(Object.assign(document.createElement('li'), {textContent: 'Element 4'}));

Full example:

const ul = document.getElementById('list');
document.querySelector('button').addEventListener('click', e => {
  ul.append(Object.assign(document.createElement('li'), 
              {textContent: 'Four', id: 'element4'}));
}, {once: true});

<ul id="list">
  <li id="element1">One</li>
  <li id="element2">Two</li>
  <li id="element3">Three</li>
</ul>
<button>Add item</button>

本文标签： htmlhow to add new ltligt to ltulgt onclick with javascriptStack Overflow