回答編集履歴
1
document.createDocumentFragment();で一気に突っ込むようにしました！
answer
CHANGED
|
@@ -36,16 +36,18 @@
|
|
|
36
36
|
{ name: 'シータ', tag: ['趣味１','趣味２','趣味３','趣味４'], 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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
+
アドレスありがとうございます！
|