Add a list item through javascript

Question

So  I am trying to print out an array that gets user input text added to it  but what I want to print out is an ordered list of the array  As you can see   if you run my code  the list item just keeps getting the user input added to it  and no new list items are added with people s names  Please help  Here is the code below     lt  DOCTYPE html gt    lt html gt    lt head gt   First name   lt input type  text  id  firstname  gt  lt br gt      lt script type  text javascript  gt   var x        function changeText2    var firstname   document getElementById  firstname   value  document getElementById  boldStuff2   innerHTML   firstname  x push firstname   document getElementById  demo   innerHTML   x       lt  script gt     lt p gt Your first name is   lt b id  boldStuff2  gt  lt  b gt   lt  p gt     lt p gt  Other people s names   lt  p gt     lt ol gt        lt li id    demo  gt   lt  li gt     lt  ol gt     lt input type  button  onclick  changeText2      value  Submit   gt      lt  head gt    lt body gt    lt  body gt    lt  html gt

User · Accepted Answer

If you want to create a li element for each input name  then you have to create it  with document createElement  MDN    Give the list the ID    lt ol id  demo  gt  lt  ol gt    and get a reference to it   var list   document getElementById  demo      In your event handler  create a new list element with the input value as content and append to the list with Node appendChild  MDN    var firstname   document getElementById  firstname   value  var entry   document createElement  li    entry appendChild document createTextNode firstname    list appendChild entry     DEMO

User · Answer

I was recently presented with this same challenge and stumbled on this thread but found a simpler solution using append     var firstname       firstname   val        ol   append    lt li gt     firstname     lt  li gt        Store the firstname value and then use append to add that value as an li to the ol  I hope this helps

User · Answer

The above answer was helpful for me  but it might be useful  or best practice  to add the name on submit  as I wound up doing  Hopefully this will be helpful to someone  CodePen Sample       lt form id  formAddName  gt         lt fieldset gt           lt legend gt Add Name  lt  legend gt               lt label for  firstName  gt First Name lt  label gt               lt input type  text  id  firstName  name  firstName    gt            lt button gt Add lt  button gt         lt  fieldset gt       lt  form gt          lt ol id  demo  gt  lt  ol gt    lt script gt      var list   document getElementById  demo        var entry   document getElementById  formAddName        entry onsubmit   function evt        evt preventDefault        var firstName   document getElementById  firstName   value      var entry   document createElement  li        entry appendChild document createTextNode firstName        list appendChild entry        lt  script gt

User · Answer

Try something like this   var node document createElement  LI    var textnode document createTextNode firstname   node appendChild textnode   document getElementById  demo   appendChild node     Fiddle  http   jsfiddle net FlameTrap 3jDZd

[javascript] Add a list item through javascript

Examples related to javascript

Examples related to dom