javascript - 如何在列表的每一行之后创建按钮？(How to create buttons after each line of the list?)

Question

I'd like to display a list of skills and values of a player, and create an increment and decrement button after each line to increase or decrease the value.

(我想显示一个球员的技能和价值的列表，并在每行之后创建一个递增和递减按钮以增加或减少该值。)

I've tried to gather lines from other questions related to this problem, but I'm a beginner and can't solve it.

(我试图从与此问题相关的其他问题中收集线索，但是我是一个初学者，无法解决它。)

Here it is my code:

(这是我的代码：)

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;

  ask by DomBar translate from so

Answer 1

You are mixing up alot of functios which would work individually.

(您混合了很多可以单独使用的功能。)

Either decide on adding the text as innerHTML or adding the elementy by appendChild(document.createElement(x)) .

(决定将文本添加为innerHTML还是通过appendChild(document.createElement(x))添加elementy。)

Also createTextNode() creates HTML encoded output and not what you seek.

(同样， createTextNode()会创建HTML编码的输出，而不是您想要的输出。)

Last, you should wait to add all to the DOM until the output is completed.

(最后，您应该等待将所有内容添加到DOM，直到输出完成。)

This is a corrected example as close to your code as possible.

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

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