html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
Start with:
<div class = "a">
</div>
<!--
Then in JS, create n more elements (5) with the class ‘a’ and put each at the bottom.
Result should be something like:
<div class = ‘a’>
<div class = ‘a’>
<div class = ‘a’>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
}
.a{
height: 45px;
width: 100px;
margin-top: 100px;
background-color: blue;
border: 2px solid red;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = () =>{
parent = document.querySelector('.a');
var i = 0;
for (i = 0; i < 5; i++){
var elem = document.createElement('div');
elem.className = "a";
parent.appendChild(elem);
var allAs = document.querySelectorAll('.a');
allAs[i].appendChild(allAs+1)
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run