I'm pretty new to javascript and wondering if there's another way of doing this without the use of 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>
you can append the div to the parent container
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);
}
Thanks for your answers , and pointing me in the right direction.
Ended up with this code that you suggested, with a little modification.
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");
};