回答編集履歴

1

document.createDocumentFragment();で一気に突っ込むようにしました!

2018/04/19 01:09

投稿

退会済みユーザー
test CHANGED
@@ -74,13 +74,17 @@
74
74
 
75
75
  //HTML内埋め込みとの境界線
76
76
 
77
+ let frag_node = document.createDocumentFragment();
78
+
77
79
  const p = document.createElement("p");
78
80
 
79
81
  const line = document.createTextNode("-------ここから下がUnderscore.js無しの処理-------");
80
82
 
83
+
84
+
81
85
  p.appendChild(line);
82
86
 
83
- document.body.appendChild(p);
87
+ frag_node.appendChild(p);
84
88
 
85
89
  for(let i in list){
86
90
 
@@ -92,7 +96,7 @@
92
96
 
93
97
  h3.appendChild(name);
94
98
 
95
- document.body.appendChild(h3);
99
+ frag_node.appendChild(h3);
96
100
 
97
101
  //dl
98
102
 
@@ -126,9 +130,11 @@
126
130
 
127
131
  }
128
132
 
129
- document.body.appendChild(dl);
133
+ frag_node.appendChild(dl);
130
134
 
131
135
  }
136
+
137
+ document.body.appendChild(frag_node);
132
138
 
133
139
  </script>
134
140
 
@@ -149,3 +155,9 @@
149
155
  「配列操作をバリバリする」もしくは「underscore.jsを使用しないといけない」という状況でないのであれば、下のscriptタグのコードの方が扱いやすいのでお勧めです!
150
156
 
151
157
  コピペで検証出来ると思いますので参考までに。
158
+
159
+ <追記>
160
+
161
+ アドバイスを受けて修正版です。
162
+
163
+ アドレスありがとうございます!