Question

因此，当有人在框中输入内容时，我将以下代码设置为创建li元素。我还希望li元素包含一个以list-Item0开头的唯一ID，并转到list-Item1等，当有人在框中输入并添加li时创建这个项目。

知道怎么做这个吗？我不知道JQuery是什么，因为我是一个完全的初学者，所以我正在寻找一些非常基本的东西，我可以在这段代码中实现。

这是我到目前为止所拥有的：

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

Answer 1

只需在函数外部设置ID计数器，创建<li>元素，设置ID和内容，递增计数器并将元素追加到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);
}

Answer 2

作为Phil答案的延伸，你可以通过将其保持在闭包中来避免全局反击：

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

向LI Javascript添加ID

2 个答案: