Soy bastante nuevo en javascript y me pregunto si hay otra forma de hacerlo sin el uso de 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>puede agregar el div al contenedor principal
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); }Gracias por sus respuestas y por señalarme en la dirección correcta.
Terminé con este código que sugirió, con una pequeña modificación.
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"); };