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.

Here is the code below:

 <!DOCTYPE html>
 <html>
 <head>
 First name: <input type="text" id="firstname"><br> 

 <script type="text/javascript">
 var x= [];

 function changeText2(){
var firstname = document.getElementById('firstname').value;
document.getElementById('boldStuff2').innerHTML = firstname;
x.push(firstname);
document.getElementById('demo').innerHTML = x;
 }
 </script>

 <p>Your first name is: <b id='boldStuff2'></b> </p> 
 <p> Other people's names: </p>
 
 <ol>
     <li id = "demo"> </li> 
 </ol>

 <input type='button' onclick='changeText2()'   value='Submit'/> 

 </head>
 <body>
 </body>
 </html>

<head> only contains meta information and links to resources, not actual content. But, the reason why you don't get a new list item is that you are not creating one. — Felix Kling
– Felix Kling, Commented Jul 21, 2013 at 15:39

Felix Kling · Accepted Answer · 2013-07-21 15:51:05Z

86

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:

<ol id="demo"></ol>

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

edited Jul 21, 2013 at 15:51

answered Jul 21, 2013 at 15:46

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Timo Over a year ago

I would have exptected that adding text to li would be simpler, with something like entry.text ='foo'. Why do I need a textnode?

Felix Kling Over a year ago

@Timo: It's been a while since I wrote that answer. I can't remember why I did it that way. But yes, you can absolutely do entry.textContent = firstname;.

Timo Over a year ago

Thanks Felix, I did a nested list based on your code, like ul-li-ul-li-/li-/ul-/li-/ul. I can imagine there is recursion for this when the list gets bigger, do you think a question here makes sense?

Felix Kling Over a year ago

@Timo: I'd look around first. I'd imagine it has been asked before how to created a nested list from data.

Timo Over a year ago

here is an example that could be improved.here is a nested loop but not what I want. I will go for the fquestion tomorrow.

Josh · Accepted Answer · 2013-07-21 15:46:14Z

6

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/

answered Jul 21, 2013 at 15:46

Josh

2,9151 gold badge24 silver badges33 bronze badges

Comments

Jesse Novotny · Accepted Answer · 2016-10-06 19:02:48Z

5

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( '<li>' + firstname + '</li>' );

Store the firstname value and then use append to add that value as an li to the ol. I hope this helps :)

answered Oct 6, 2016 at 19:02

Jesse Novotny

7299 silver badges17 bronze badges

Comments

inkpixelspaper · Accepted Answer · 2018-01-14 18:31:05Z

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

    <form id="formAddName">
      <fieldset>
        <legend>Add Name </legend>
            <label for="firstName">First Name</label>
            <input type="text" id="firstName" name="firstName" />

        <button>Add</button>
      </fieldset>
    </form>

      <ol id="demo"></ol>

<script>
    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);
  }
</script>

Unmitigated · Accepted Answer · 2023-09-09 18:22:59Z

0

For a simpler solution, you can just create a <li> (with document.createElement), set its textContent, and append it to the <ol>.

const list = document.querySelector('ol');
list.append(Object.assign(document.createElement('li'), {textContent: firstname}));

Demo:

document.querySelector('button').addEventListener('click', e => {
  const firstname = document.querySelector('#firstname').value;
  const list = document.querySelector('ol');
  list.append(Object.assign(document.createElement('li'), {textContent: firstname}));
});

<label>First name: <input id="firstname"></label> <button>Submit</button>
<ol></ol>

answered Sep 9, 2023 at 18:22

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Collectives™ on Stack Overflow

Add a list item through JavaScript

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related