0 

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，但它看起来是错误的。

任何帮助是极大的赞赏。

4

3 回答 3

1

Node.appendChild()

该Node.appendChild()方法将一个节点添加到指定父节点的子节点列表的末尾。如果给定的子节点是对文档中现有节点的引用，appendChild()则将其从当前位置移动到新位置（不需要在将节点附加到其他节点之前将其从其父节点中删除）。

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

未捕获的类型错误：无法在 'Node' 上执行 'appendChild'：参数 1 不是 '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);
  }
}

于 2018-10-28T07:08:09.280 回答
1

你有两个问题，第一个是你试图调用一个不存在appendChild的函数，当我第一次修复代码时由于某种原因它不起作用，但现在似乎起作用了。我不知道。该功能在那里，但它最初对我来说是一个很大的红色错误，所以我只是假设它不存在。

第二个是您使用字符串文字"breakMark"而不是变量调用此函数breakMark

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

于 2018-10-28T07:09:09.843 回答
0

我将使用 foEachloop 将 html 创建为数组中的字符串，然后一键将其插入 html。而不是尝试在每次迭代时附加到 HTML。这意味着 DOM 只被操作一次，而不是在每个循环中。

let buttonArr = [1,2,3,4,5,6,7,8,9,0];
var buttonStr = '';


buttonArr.forEach(function(button){
 buttonStr += '<input type = "button" value="'+ button +'"/>';
 button % 3 == 0 
  ? buttonStr += '<br/>'
  : console.log(button);
 })
 
 document.body.innerHTML = buttonStr;

另外 - 如果您将按钮用作按钮（例如在计算器上），最好将它们创建为按钮。

    let buttonArr = [1,2,3,4,5,6,7,8,9,0];
    var buttonStr = '';


    buttonArr.forEach(function(button){
     buttonStr += '<button type = "button" value="'+ button +'" onclick="console.log(\'Value = \'+ this.value)">'+ button +'</button>';
     button % 3 == 0 
      ? buttonStr += '<br/>'
      : console.log(button);
     })
     
     document.body.innerHTML = buttonStr;

于 2018-10-28T07:15:08.193 回答