指定通过AppendChild创建的元素的ID？

Question

我正在做的是一个简单的待办事项清单，单击按钮时，我使用函数appendChild创建元素。

如何为用appendChild创建的元素创建ID？

var input = document.getElementById("input-0");
//Create button to add LI

var AddGoal = document.getElementById('btn');
AddGoal.addEventListener('click', function (){
    var Ulist = document.getElementById('MyList');
    var NewLi = document.createElement('li');
    var text = document.getElementById('input-0').value;
    //var createtext = document.createTextNode(input.nodeValue);
    //NewLi.appendChild(t);
    Ulist.appendChild(NewLi);
    //document.body.appendChild(NewLi);
    NewLi.innerText = text;
});

var GetLiedto = document.getElementsByClassName('li');
GetLiedto.addEventListener ('mouseover', function (){
    GetLiedto.display.color = 'red';    
});

/*
var AddGoal = document.getElementById('btn');
AddGoal.addEventListener('click', function (){
    var Ulist = document.getElementById('MyList');
    var NewLi = document.createElement('li');
    var text = document.getElementById('input-0').value;
    //var createtext = document.createTextNode(input.nodeValue);
    //NewLi.appendChild(t);
    document.body.appendChild(NewLi);
    //document.body.appendChild(NewLi);
    NewLi.innerText = text;
});
*/

Answer 1

您可以在将新创建的元素附加到主体之前或之后修改其属性。两者都会导致为新的<li>元素分配ID。

之前：

AddGoal.addEventListener('click', function (){
   var NewLi = document.createElement('li');
   NewLi.id = "some-id";
   document.body.appendChild(NewLi);
});

之后：

AddGoal.addEventListener('click', function (){
   var NewLi = document.createElement('li');
   document.body.appendChild(NewLi);
   NewLi.id = "some-id";
});