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

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