如何在列表的每一行之后创建按钮？

Question

我想显示一个球员的技能和价值的列表，并在每行之后创建一个递增和递减按钮以增加或减少该值。我试图从与此问题相关的其他问题中收集线索，但是我是一个初学者，无法解决它。这是我的代码：

var text = "<ul>";
var i = 0;

for (i; i < this.skillPoints.length; i++) {
  text +=
    "<li>" +
    this.skillPoints[i]._name +
    " value is: " +
    this.skillPoints[i]._value +
    "</li></br>";

    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(text));

    var btn = document.createElement("BUTTON");
    btn.innerHTML = "Increment";
    entry.appendChild(btn);
}

text += "</ul>";
document.getElementById("list").innerHTML = text;

Answer 1

您混合了很多可以单独使用的功能。决定将文本添加为​​innerHTML还是将元素元素添加为appendChild(document.createElement(x))。同样，createTextNode()创建HTML编码的输出，而不是您想要的输出。最后，您应该等待将所有内容添加到DOM中，直到输出完成。

这是一个尽可能接近您的代码的更正示例。

//REM: For testing
var skillPoints = [
	{_name: 'Skill 1', _value: 'a'},
	{_name: 'Skill 2', _value: 'b'}
];

//REM: Start of the list
var text = "<ul>";

//REM: Removed "this" for testing purposes
for(var i=0; i < skillPoints.length; i++){
  text += "<li>";
  text += skillPoints[i]._name;
  text += " value is: ";
  text += skillPoints[i]._value;
  text += "</li></br>";
  text += "<button> Increment </button>";

  //REM: Not required.. the li gets added as string already in this case. Use either or but not both.
  //var entry = document.createElement('li');

  //REM: First, textnode adds encoded HTML and second, the list is not complete yet
  //REM: https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode
  //entry.appendChild(document.createTextNode(text));
};

text += "</ul>";

//REM: Now that the ul is complete, we add it to the DOM
//REM: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
document.body.insertAdjacentHTML('beforeend', text);