質問編集履歴

3

修正内容を追記

2017/10/01 16:56

投稿

elelboo
elelboo

スコア28

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の関係性を追記、修正

2017/10/01 16:56

投稿

elelboo
elelboo

スコア28

test CHANGED
File without changes
test CHANGED
@@ -66,9 +66,7 @@
66
66
 
67
67
 
68
68
 
69
- //仮データ ループが周るかどうかの確認用
70
-
71
- var data = [["Jan","Feb","Mar","Apr"],["a", "b", "c", "d"]];
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', 'http://localhost:3000');
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','YYYY-MM-DD');
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

誤字の修正

2017/10/01 16:44

投稿

elelboo
elelboo

スコア28

test CHANGED
@@ -1 +1 @@
1
- DOMをJavaScript動的に生成する際のスマートな書き方に関して
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