What can you do with this code to create a mesh? You can also add your own, more correct code for this solution to this problem
& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; JavaScript game & lt; / title & gt;
& lt; style & gt;
.elem {
width: 25px;
height: 25px;
border: 1px solid green;
display: inline-block;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body onLoad = "clone ()" & gt;
& lt; div id = "parent" & gt;
& lt; div class = "elem" & gt; & lt; / div & gt;
& lt; / div & gt;
& lt; script & gt;
for (var i = 1; i & lt; 15; i ++) {
clone (i);
};
function clone () {
var parent = document.getElementById ('parent');
var elem = parent.querySelector ('. elem');
var clone = elem.cloneNode (true);
parent.appendChild (clone);
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;
Answer 1, authority 100%
Here is a small implementation on a div
using 2 loops:
for (var i = 0; i & lt; 20; i ++) {
var row = createRow ();
for (var k = 0; k & lt; 20; k ++) {
createElement (row);
};
};
function createRow () {
var parent = document.getElementById ('parent');
var row = document.createElement ('div');
row.className = "row";
parent.appendChild (row);
return row;
}
function createElement (parent) {
var elem = document.createElement ('div');
elem.className = "elem";
parent.appendChild (elem);
}
# parent {
display: flex;
flex-direction: column;
}
.row {
height: 27px;
}
.elem {
width: 25px;
height: 25px;
border: 1px solid green;
display: inline-block;
}
& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; JavaScript game & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div id = "parent" & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;
Answer 2, authority 67%
document.body.innerHTML = (
"& lt; div class = r & gt;" +
"& lt; div class = c & gt; & lt; / div & gt;". repeat (20) +
"& lt; / div & gt;"
) .repeat (20)
* {
box-sizing: border-box;
}
body {
margin: 0;
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.r {
display: table-row;
}
.c {
display: table-cell;
}
body, div {
border: 1px solid;
}
.c: before {
content: "";
float: left;
padding-top: 100%;
}