回答編集履歴

2

修正

2017/01/21 20:54

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -88,7 +88,7 @@
88
88
 
89
89
  <script>
90
90
 
91
- window.onload = function () {
91
+ window.addEventListener("DOMContentLoaded", function () {
92
92
 
93
93
  let anchor = document.getElementsByTagName("a");
94
94
 
@@ -108,9 +108,9 @@
108
108
 
109
109
  image[index].src = "https://placehold.jp/ff4747/ffffff/150x150.png?text=" + (index + 1)
110
110
 
111
+ }, false);
112
+
111
- });
113
+ });
112
-
113
- }
114
114
 
115
115
  </script>
116
116
 

1

追記

2017/01/21 20:54

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -119,3 +119,83 @@
119
119
  </html>
120
120
 
121
121
  ```
122
+
123
+ 追記
124
+
125
+ ---
126
+
127
+ innerHTMLを使うと以下のように。
128
+
129
+ ```HTML
130
+
131
+ <!DOCTYPE HTML>
132
+
133
+ <html>
134
+
135
+ <head>
136
+
137
+ <meta charset="UTF-8">
138
+
139
+ <title>タイトル</title>
140
+
141
+ </head>
142
+
143
+ <body>
144
+
145
+ <script>
146
+
147
+ document.addEventListener("DOMContentLoaded", function () {
148
+
149
+ for (i = 1; i <= 13; i++) {
150
+
151
+ document.body.innerHTML += '<div class="gallery-img"><a href="https://test.github.io/img/' + i + '.jpg"><img src="https://test.github.io/site/test/' + i + '.jpg"></a></div>';
152
+
153
+ }
154
+
155
+ }, false);
156
+
157
+ </script>
158
+
159
+ </body>
160
+
161
+ </html>
162
+
163
+ ```
164
+
165
+ insertAdjacentHTMLを使うと以下のように行えると思います。beforeendを指定することでbodyの一番下の部分に挿入することができます。
166
+
167
+ ```HTML
168
+
169
+ <!DOCTYPE HTML>
170
+
171
+ <html>
172
+
173
+ <head>
174
+
175
+ <meta charset="UTF-8">
176
+
177
+ <title>タイトル</title>
178
+
179
+ </head>
180
+
181
+ <body>
182
+
183
+ <script>
184
+
185
+ document.addEventListener("DOMContentLoaded", function () {
186
+
187
+ for (i = 1; i <= 13; i++) {
188
+
189
+ document.body.insertAdjacentHTML('beforeend', '<div class="gallery-img"><a href="https://test.github.io/img/' + i + '.jpg"><img src="https://test.github.io/site/test/' + i + '.jpg"></a></div>');
190
+
191
+ }
192
+
193
+ }, false);
194
+
195
+ </script>
196
+
197
+ </body>
198
+
199
+ </html>
200
+
201
+ ```