javascript - 使用 for 循环附加子元素，如果 i%3 ==0 我想在该数字的输入后添加一个 <br>

Question

let buttonArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
for (let i of buttonArr) {
  let numberButton = document.createElement("input");
  numberButton.type = "button";
  numberButton.value = i;
  document.body.appendChild(numberButton);


  if (i % 3 == 0) {
    let breakMark = document.createElement("br");
    document.body.appendChild("breakMark");
  } else {
    console.log(i);
  }
}

我想使用appendChild()在 JavaScript 中，使用 for 循环根据数组的长度将输入标记添加到 HTML。我只想在一行中显示三个按钮，这意味着在将三个新输入标记添加到 HTML 后，我想添加一个
元素。我的想法是如果i%3 == 0然后appendChild() <br>到 HTML 但它看起来是错误的。

非常感谢任何帮助。

Answer 1

Node.appendChild()

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

通过用引号将 breakMark 括起来，您将附加字符串文字而不是变量(它是一个节点)的值。但由于 Node.appendChild() 添加节点而不是 DOMString，因此会抛出错误:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."

因此删除周围的引号，以便 appendChild() 将创建的节点作为参数:

let buttonArr = [1,2,3,4,5,6,7,8,9,0];
for(let i of buttonArr){
  let numberButton = document.createElement("input");
  numberButton.type = "button";
  numberButton.value = i;
  document.body.appendChild(numberButton); 


  if(i%3 == 0){
      let breakMark = document.createElement("br");
      document.body.appendChild(breakMark); //remove the quotes
  }else{
      console.log(i);
  }
}