Adding ID to LI Javascript

Question

So I have this following code set up to create an li element when someone inputs something into a box. I also want the li element to contain a unique ID which will begin with list-Item0 and go to list-Item1, etc with every li created when someone types into the box and adds the item.

Any idea how I would go about doing this? I don't know what JQuery is as I am a complete beginner so am looking for something extremely basic which I can implement in this code.

Here's what I have so far:

function addItemFunction() {
    document.getElementById("itemList").innerHTML=document.getElementById("itemList").innerHTML + '<li>' + addNewBox.value + '</li>';  
}

@DeanRather—no, don't do that. Much better for the OP to learn plain JS, then make his/her own decision about which library (if any) best suits their needs for a particular purpose. — RobG
– RobG, Commented Jul 14, 2015 at 0:33

Phil · Accepted Answer · 2015-07-13 23:54:24Z

6

Simply keep a counter for the ID outside your function, create an <li> element, set the ID and content, increment the counter and append the element to your itemList.

var listItemCounter = 0;        

function addItemFunction() {
    var li = document.createElement('li');
    li.id = 'list-Item' + listItemCounter++;
    li.innerHTML = addNewBox.value;

    document.getElementById('itemList').appendChild(li);
}

answered Jul 13, 2015 at 23:54

Phil

166k25 gold badges265 silver badges269 bronze badges

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

1 Comment

Marty Mulligan Over a year ago

I was just making a JS Fiddle for you to mess with when Phil posted this. Here ya go: jsfiddle.net/0fn8wf65

RobG · Accepted Answer · 2015-07-14 00:31:45Z

2

As an extension to Phil's answer, you can avoid the global counter by keeping it in a closure:

var addItemFunction = function () {
    var listItemCounter = 0;        

    return function () {
        var li = document.createElement('li');
        li.id = 'list-Item' + listItemCounter++;
        li.innerHTML = addNewBox.value;

        document.getElementById('itemList').appendChild(li);
    };
}());

answered Jul 14, 2015 at 0:31

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

Phil Over a year ago

The counter in my answer isn't necessarily global, it's just outside the function (as it is in this answer).

Collectives™ on Stack Overflow

Adding ID to LI Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related