Question

我想在for循环中制作一个元素50次。我的代码如下：

function pGenerate() {
  for (i, i <= 50; i++;) {
    var newP = document.createElement("p");
    var pText = document.createTextNode("sample paragraph");
    newP.appendChild(pText);

    var contentSection = document.getElementById("content");
    document.body.insertBefore(newP, contentSection);
  }
}

预期的结果是，它会生成50个<p>标记，其中包含＆＃34;样本内容。实际结果很好......没什么。 https://jsfiddle.net/2L8reked/1/

我编写此代码的代码背后的思考过程如下：我基本上有一个循环设置循环50次。对于每个周期，我想创建一个p标记，同时创建一个带有内容＆＃34;示例段落的文本节点。＆＃34;在下一步中，我抓住div的ID #content，然后我尝试使用insertBefore填充该区域。

我的错误似乎是我使用insertBefore的方式。在MDN上查看，它的定义是＆＃34;在参考节点之前插入指定节点作为当前节点的子节点。＆＃34; https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

考虑到这个定义 - 我现在使用此理解我将p标记作为#content的子项插入（或尝试）。我应该使用不同的方法吗？我误解了这是如何工作的吗？

我还尝试了innerHTML方法，如下所示：https://jsfiddle.net/0e1ej9sk/1/

哪种方法最适合我尝试做的事情？
在第一个例子中，我使用insertBefore的逻辑背后的缺陷是什么？

Answer 1

您需要在i初始化1，并使用分号正确地分隔for语句的所有部分，如下所示：

function pGenerate() {
  for (var i = 1; i <= 50; i++) {
    var newP = document.createElement("p");
    var pText = document.createTextNode("sample paragraph (i=" + i + ")");
    newP.appendChild(pText);

    var contentSection = document.getElementById("content");
    document.body.insertBefore(newP, contentSection);
  }
}

pGenerate();

<div id="content"></div>

Answer 2

您有3个语法错误。

将for循环中的i,更改为1=1;，然后删除最后; i++;到i++

function pGenerate() {
  for (i=1; i <= 50; i++) {
    var newP = document.createElement("p");
    var pText = document.createTextNode("sample paragraph");
    newP.appendChild(pText);
    
    var contentSection = document.getElementById("content");
    document.body.insertBefore(newP, contentSection);
  }
}

window.onload = function() {
  pGenerate();
}

<div id="content"></div>

Answer 3

你可以这样做

function pGenerate() {
  for (i=1; i <= 50; i++) {
    var newP = document.createElement("p");
    var pText = document.createTextNode("sample paragraph");
    newP.appendChild(pText);
    var contentSection = document.getElementById("content");
    document.body.insertBefore(newP, contentSection);
  }
}

document.ready(pGenerate);

for循环

3 个答案: