如何使用JavaScript循环输出一个html div元素100次

Question

如何使用下面编写的函数中的循环输出当前div元素100次？我尝试这样做的方式除了div元素外，一次都不输出任何内容。

function printHundredtimes()
{
for(i = 0;i<100;i++)
{
document.getElementById("firstDiv").innerHTML += "<div id = "firstDiv"><center><p id ="paragraph">Hello, World </p></center></div>";
}
}

printHundredtimes();

<div id="firstDiv">
<center>
<p id="paragraph">Hello, World</p>
</center>
</div>

Answer 1

您的代码应该类似于这个

for (i = 0; i < 100; i++){
var div = document.createElement('p');
div.textContent = "Hello World";
div.setAttribute('class', 'paragraph');
document.getElementById("paragraph-container").appendChild(div);
}

Id对于所有元素都应该是唯一的，否则如果要标识多个元素，则应该使用"class"。

<div id="paragraph-container" style="text-align: center;">
<p class="paragraph">Hello World</p>
</div>

正如Jon p在评论中所说，中心标签已经过时了。您可以通过内联css或内部css 将文本与段落的父元素对齐

Answer 2

它没有打印任何内容的原因是因为一个错误：

"<div id = "firstDiv"><center><p id ="paragraph">Hello, World </p></center></div>";

你的引号没有转义。考虑将其更改为：

"<div id = "firstDiv"><center><p id="paragraph">Hello, World </p></center></div>";

更好的是，考虑将字符串相乘，然后将其添加到数组中。如下所示：

function repeat(count, str) {
return str.repeat
? str.repeat(count)
: (function () {var arr = []; for (var i = 0; i < count; ++i) {arr.push(str);} return arr.join('');})()
}
function printHundredtimes() {
var str = repeat(100, '<center><p id ="paragraph">Hello, World </p></center>'));
document.getElementById("firstDiv").innerHTML = str;
}

注意，我发现你在现有的"firstDiv"中写了另一个id"firstDiv"，这似乎没有意义，有两个。

上述方法不对重复更改的dom征税。所以最好只给dom写一次信。相反，如上所述，您可以将字符串乘以100，然后将其写入dom。否则，浏览器将开始变得非常慢，并最终冻结，因为所有的不断变化

把你的大功能分解成更小的功能也是更好的做法。这使它们更容易在其他地方重复使用。让函数名称描述其单个操作。这纯粹是编程。