how to add new li to ul onclick with javascript

Question

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       lt ul id  list  gt   lt li id  element1  gt One lt  li gt   lt li id  element2  gt Two lt  li gt   lt li id  element3  gt Three lt  li gt   lt  ul gt         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

User · Answer

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

User · Answer

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

User · Answer

There is nothing much to add to your code except appending the li tag to the ul ul appendChild li   and there you go just add this to your function and then it should work

User · Answer

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

[javascript] how to add new <li> to <ul> onclick with javascript

Examples related to javascript

Examples related to html

Examples related to list