teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

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

2018/04/19 01:09

投稿

退会済みユーザー
answer CHANGED
@@ -36,16 +36,18 @@
36
36
  { name: 'シータ', tag: ['趣味1','趣味2','趣味3','趣味4'], desc: ['掃除','バルス','スルー','物探し'] }
37
37
  ];
38
38
  //HTML内埋め込みとの境界線
39
+ let frag_node = document.createDocumentFragment();
39
40
  const p = document.createElement("p");
40
41
  const line = document.createTextNode("-------ここから下がUnderscore.js無しの処理-------");
42
+
41
43
  p.appendChild(line);
42
- document.body.appendChild(p);
44
+ frag_node.appendChild(p);
43
45
  for(let i in list){
44
46
  //h3
45
47
  const h3 = document.createElement("h3");
46
48
  const name = document.createTextNode(list[i].name);
47
49
  h3.appendChild(name);
48
- document.body.appendChild(h3);
50
+ frag_node.appendChild(h3);
49
51
  //dl
50
52
  const dl = document.createElement("dl");
51
53
  for(const j in list[i].tag){
@@ -62,8 +64,9 @@
62
64
  dd.appendChild(desc);
63
65
  dl.appendChild(dd);
64
66
  }
65
- document.body.appendChild(dl);
67
+ frag_node.appendChild(dl);
66
68
  }
69
+ document.body.appendChild(frag_node);
67
70
  </script>
68
71
  </body>
69
72
  </html>
@@ -73,4 +76,7 @@
73
76
  上のscriptタグがunderscore.jsを使用したコード。
74
77
  下のscriptタグが未使用のコードです。
75
78
  「配列操作をバリバリする」もしくは「underscore.jsを使用しないといけない」という状況でないのであれば、下のscriptタグのコードの方が扱いやすいのでお勧めです!
76
- コピペで検証出来ると思いますので参考までに。
79
+ コピペで検証出来ると思いますので参考までに。
80
+ <追記>
81
+ アドバイスを受けて修正版です。
82
+ アドレスありがとうございます!