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 plete 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>';  
}

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 plete 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>';  
}

• javascript

Share Improve this question Follow edited Jul 13, 2015 at 23:56 Michael0x2a 64.6k3232 gold badges189189 silver badges240240 bronze badges asked Jul 13, 2015 at 23:49 revalerstrasserevalerstrasse 111 silver badge11 bronze badge 1

• 1 @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 Commented Jul 14, 2015 at 0:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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);
}

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);
    };
}());