質問編集履歴
3
修正内容を追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -64,6 +64,122 @@
|
|
64
64
|
|
65
65
|
```javascript
|
66
66
|
|
67
|
+
//仮データ ループが周るかどうかの確認用
|
68
|
+
|
69
|
+
var data = [["Jan","Feb","Mar","Apr"],["a", "b", "c", "d"]];
|
70
|
+
|
71
|
+
var fragment = document.createDocumentFragment();
|
72
|
+
|
73
|
+
for (var i = 0, len = data.length; i < len; i++) {
|
74
|
+
|
75
|
+
var items = data[i].length;
|
76
|
+
|
77
|
+
for (var j = 0; j < items; j++) {
|
78
|
+
|
79
|
+
var div = document.createElement('div');
|
80
|
+
|
81
|
+
var context = document.createElement('div');
|
82
|
+
|
83
|
+
context.classList.add('context');
|
84
|
+
|
85
|
+
var a = document.createElement('a');
|
86
|
+
|
87
|
+
a.setAttribute('href', 'http://localhost:3000');
|
88
|
+
|
89
|
+
context.appendChild(a);
|
90
|
+
|
91
|
+
var content = document.createElement('div');
|
92
|
+
|
93
|
+
content.classList.add('content');
|
94
|
+
|
95
|
+
var content2 = document.createElement('div');
|
96
|
+
|
97
|
+
content2.classList.add('item-header');
|
98
|
+
|
99
|
+
var content3 = document.createElement('a');
|
100
|
+
|
101
|
+
content3.classList.add('profile');
|
102
|
+
|
103
|
+
var content4 = document.createElement('span');
|
104
|
+
|
105
|
+
content4.classList.add('name');
|
106
|
+
|
107
|
+
content4.insertAdjacentHTML('afterbegin','名前');
|
108
|
+
|
109
|
+
var content5 = document.createElement('small');
|
110
|
+
|
111
|
+
content5.classList.add('time');
|
112
|
+
|
113
|
+
content5.insertAdjacentHTML('afterbegin','YYYY-MM-DD');
|
114
|
+
|
115
|
+
content3.appendChild(content4);
|
116
|
+
|
117
|
+
content2.appendChild(content3);
|
118
|
+
|
119
|
+
content2.appendChild(content5);
|
120
|
+
|
121
|
+
//div.content
|
122
|
+
|
123
|
+
content.appendChild(content2);
|
124
|
+
|
125
|
+
var elmc = document.createElement('div');
|
126
|
+
|
127
|
+
elmc.classList.add('text-container');
|
128
|
+
|
129
|
+
var elmc2 = document.createElement('p');
|
130
|
+
|
131
|
+
elmc2.classList.add('comment');
|
132
|
+
|
133
|
+
elmc2.insertAdjacentHTML('afterbegin','コメント内容');
|
134
|
+
|
135
|
+
//div.text-container
|
136
|
+
|
137
|
+
elmc.appendChild(elmc2);
|
138
|
+
|
139
|
+
var elmf = document.createElement('div');
|
140
|
+
|
141
|
+
elmf.classList.add('item-fotter');
|
142
|
+
|
143
|
+
var elmf2 = document.createElement('span');
|
144
|
+
|
145
|
+
elmf2.classList.add('reply');
|
146
|
+
|
147
|
+
var elmf3 = document.createElement('span');
|
148
|
+
|
149
|
+
elmf3.classList.add('retweet');
|
150
|
+
|
151
|
+
//div.item-fotter
|
152
|
+
|
153
|
+
elmf.appendChild(elmf2);
|
154
|
+
|
155
|
+
elmf.appendChild(elmf3);
|
156
|
+
|
157
|
+
//div
|
158
|
+
|
159
|
+
content.appendChild(elmc);
|
160
|
+
|
161
|
+
content.appendChild(elmf);
|
162
|
+
|
163
|
+
div.appendChild(context);
|
164
|
+
|
165
|
+
div.appendChild(content);
|
166
|
+
|
167
|
+
fragment.appendChild(div);
|
168
|
+
|
169
|
+
}
|
170
|
+
|
171
|
+
}
|
172
|
+
|
173
|
+
```
|
174
|
+
|
175
|
+
|
176
|
+
|
177
|
+
■2017/10/02 1:55
|
178
|
+
|
179
|
+
「仮データ」とHTMLの関係性が分からなかったため、コードを修正しました。
|
180
|
+
|
181
|
+
```javascript
|
182
|
+
|
67
183
|
|
68
184
|
|
69
185
|
var data = [["URLA","名前A","日付A","コメントA"],["URLB","名前B","日付B","コメントB"],["URLC","名前C","日付C","コメントC"]];
|
2
「仮データ」とHTMLの関係性を追記、修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -66,9 +66,7 @@
|
|
66
66
|
|
67
67
|
|
68
68
|
|
69
|
-
//仮データ ループが周るかどうかの確認用
|
70
|
-
|
71
|
-
var data = [["
|
69
|
+
var data = [["URLA","名前A","日付A","コメントA"],["URLB","名前B","日付B","コメントB"],["URLC","名前C","日付C","コメントC"]];
|
72
70
|
|
73
71
|
|
74
72
|
|
@@ -78,14 +76,6 @@
|
|
78
76
|
|
79
77
|
for (var i = 0, len = data.length; i < len; i++) {
|
80
78
|
|
81
|
-
var items = data[i].length;
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
for (var j = 0; j < items; j++) {
|
86
|
-
|
87
|
-
|
88
|
-
|
89
79
|
|
90
80
|
|
91
81
|
var div = document.createElement('div');
|
@@ -100,7 +90,7 @@
|
|
100
90
|
|
101
91
|
var a = document.createElement('a');
|
102
92
|
|
103
|
-
a.setAttribute('href',
|
93
|
+
a.setAttribute('href', data[i][0]);
|
104
94
|
|
105
95
|
context.appendChild(a);
|
106
96
|
|
@@ -128,7 +118,7 @@
|
|
128
118
|
|
129
119
|
content4.classList.add('name');
|
130
120
|
|
131
|
-
content4.insertAdjacentHTML('afterbegin',
|
121
|
+
content4.insertAdjacentHTML('afterbegin',data[i][1]);
|
132
122
|
|
133
123
|
|
134
124
|
|
@@ -136,7 +126,7 @@
|
|
136
126
|
|
137
127
|
content5.classList.add('time');
|
138
128
|
|
139
|
-
content5.insertAdjacentHTML('afterbegin',
|
129
|
+
content5.insertAdjacentHTML('afterbegin',data[i][2]);
|
140
130
|
|
141
131
|
|
142
132
|
|
@@ -164,7 +154,7 @@
|
|
164
154
|
|
165
155
|
elmc2.classList.add('comment');
|
166
156
|
|
167
|
-
elmc2.insertAdjacentHTML('afterbegin',
|
157
|
+
elmc2.insertAdjacentHTML('afterbegin',data[i][3]);
|
168
158
|
|
169
159
|
//div.text-container
|
170
160
|
|
@@ -206,8 +196,6 @@
|
|
206
196
|
|
207
197
|
fragment.appendChild(div);
|
208
198
|
|
209
|
-
}
|
210
|
-
|
211
199
|
}
|
212
200
|
|
213
201
|
```
|
1
誤字の修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
JavaScriptでDOMを動的に生成する際のスマートな書き方に関して
|
test
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
###前提・実現したいこと
|
2
2
|
|
3
|
-
下記HTMLのDOMをJavaScript動的に生成したいと考えています。
|
3
|
+
下記HTMLのDOMをJavaScriptで動的に生成したいと考えています。
|
4
4
|
|
5
5
|
自分なりに書き、動作は確認できました。
|
6
6
|
|