javascript - 想要多次使用appendChild

Question

哎呀，在代码审查部分不小心问了这个=D 让我们再试一次。

每次单击按钮时，我都会尝试在部分内创建一个小 div。

该部分是 id="grid"，按钮有一个简单的 onclick="generateGrid()"

我的代码:

 var div = document.createElement('div');

 function generateGrid() {

 document.getElementById("grid").appendChild(div);
}

这有效，但只能一次。我尝试研究答案，有几个人似乎有类似但更复杂的情况，我无法弄清楚这一点。

基本上我只想单击按钮，该部分中会弹出另一个 div。

所以最初它看起来像这样:

<section id="grid">
</section>

然后点击按钮后，它看起来像这样:

<section id="grid">
<div></div>
</section>

然后，当我再次单击该按钮后，它看起来像这样:

<section id="grid">
<div></div>
<div></div>
</section>

等等等等。

现在第一次按钮点击效果很好，但之后点击就没有任何反应。

尽可能避免使用 jQuery，只使用普通 JS。

稍后我计划使用循环来根据 clientWidth 生成 div，但我开始简单 =]

我需要对appendChild做些什么还是应该完全使用其他东西？我也尝试过使用innerHTML，但未能成功。

谢谢!

Answer 1

这是因为当您在函数外部创建 div 时，无论您调用该函数多少次，该 div 都是同一个节点，并且无法添加相同的节点多次指向同一个父节点。描述了一个几乎类似的问题here 。当您在函数内创建 div 时，它会创建一个新节点，该节点将添加到父节点

function generateGrid() {
  var div = document.createElement('div');
  var nodeTxt = document.createTextNode('Div');
  div.appendChild(nodeTxt);

  document.getElementById("grid").appendChild(div);
}

<section id="grid"></section>
<button type='button' onclick='generateGrid()'> Click</button>