另一种不用document.write()就能解决这个问题的方法

Question

我对javascript很陌生，想知道是否有其他方法可以在不使用document.write((的情况下做到这一点

<script>
for (i = 1; i <= 2; i++){
document.write("<div class='menu'>");
document.write("<button id='btn"+i+"' value='"+i * 10+"'>");
document.write("<img class='screen_icon' src='./assets/img/screen.png'>");
document.write("<span class='screenSource'>None</span>");
document.write("<span class='screen_text'>Screen "+i+"</span>");
document.write("</button>");
document.write("</div>");
}
</script>

Answer 1

您可以将div附加到父容器

for (var i = 0; i < =2; i++) {
var div = document.createElement('div');
div.innerHTML = "<div class='menu'>" +
"<button id='btn"+i+"' value='"+i * 10+"'>" +
"<img class='screen_icon' src='./assets/img/screen.png'>" + '
"<span class='screenSource'>None</span>" +
"<span class='screen_text'>Screen "+i+"</span>" +
"</button>"+
"</div>"
document.getElementById('parent').appendChild(div);
}

Answer 2

感谢您的回答，并为我指明了正确的方向。

最后得到了您建议的代码，并做了一些修改。

for (var i = 1; i <= 2; i++) {
var div = document.createElement('div');
div.innerHTML = "<button id='btn"+i+"' value='"+i * 10+"'>" +
"<img class='screen_icon' src='./assets/img/screen.png'>" +
"<span class='screenSource'>None</span>" +
"<span class='screen_text'>Screen "+i+"</span>" +
"</button>";
document.getElementById('main_menu').appendChild(div);
div.classList.add("menu");
};