Question

 // Run loop through choices array
  for(let i = 0; i < choices.length; i++) {
    // Populate buttons to screen
    let choiceBtn = document.createElement("BUTTON");
    choiceBtn.classList.add("btn", "throws");
    choiceBtn.setAttribute("data-choice", choices[i]);
    infoScreen.appendChild(choiceBtn);

我想我可以使用

添加来自choiceBtn变量的文本

choiceBtn.innerHTML(choices[i]);

但它似乎与.innerText或appendChild一起工作，但我可能只是做错了什么。只是想我会问你们所有人。

Answer 1

虽然您可以使用按钮的.textContent或。innerText属性（。innerText具有识别换行符的优势），但明确创建新内容的形式更好元素的文本节点符合此respondent，因为以下代码包含了 user7393973 的建议：

＆＃13;

var d = document;
var choices = ["alpha", "beta", "gamma"];

for (let i = 0; i < choices.length; i++) {
  let choiceBtn = d.createElement("BUTTON");
  choiceBtn.setAttribute("data-choice", choices[i]);

  /* recommended way: */
  choiceBtn.appendChild(d.createTextNode("Your\nChoice\nButton " + i));
  
  /* another way:
   choiceBtn.textContent = "Your\nChoice\nButton "+i;
  */
  /* and one more way:
   choiceBtn.innerText = "Your\nChoice\nButton "+i;
  */

  d.body.appendChild( choiceBtn );
}

＆＃13;

button {
  width: 150px;
  height: 150px;
  color: #f00;
}

＆＃13;

请注意;这个resource认为，在设置空元素的文本节点值方面，显式创建文本节点或使用.textContent属性同样合法。此外，.innerText最初是MS extension to the DOM，它在IE中可以设置以及获取文本节点的文本值。 Google Chrome以同样的方式支持此功能。因此，总而言之，OP可以使用三种指示方式中的一种来设置文本节点。

最后一点，有：

......每当您使用innerHTML设置时都存在安全风险你无法控制的字符串。

安全风险是XSS攻击的威胁;阅读更多here。

如何动态添加文本到按钮？

1 个答案: