回答編集履歴
2
createDocumentFragment の説明文を追加
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
`innerHTML` は上書きするので、innerHTML に代入する前に連結した文字列を入れる必要があります。
|
|
5
|
+
`innerHTML` は**上書き**するので、innerHTML に代入する前に連結した文字列を入れる必要があります。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -30,7 +30,9 @@
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
挿入するなら `insertAdjacentHTML` を使います。
|
|
33
|
+
HTMLを**挿入**するなら `insertAdjacentHTML` を使います。
|
|
34
|
+
|
|
35
|
+
(※`innerHTML` を `+=` で上書き追加すると、既存のDOM参照は失われるので、お勧めはしません。)
|
|
34
36
|
|
|
35
37
|
|
|
36
38
|
|
|
@@ -54,11 +56,13 @@
|
|
|
54
56
|
|
|
55
57
|
|
|
56
58
|
|
|
57
|
-
|
|
59
|
+
### createDocumentFragment()
|
|
58
60
|
|
|
59
61
|
|
|
60
62
|
|
|
61
|
-
|
|
63
|
+
**ノード**を挿入するなら、`createDocumentFragment` を使います。
|
|
64
|
+
|
|
65
|
+
今までの方法はHTMLタグを挿入or上書きするものでしたが、ノードで扱う事で特殊文字(`<>&"'`)のエスケープミスによる不具合(XSS)から解放されます。
|
|
62
66
|
|
|
63
67
|
|
|
64
68
|
|
1
innerHTML のコード修正
test
CHANGED
|
@@ -16,11 +16,9 @@
|
|
|
16
16
|
|
|
17
17
|
for (var i = 0; i < 5; i++) {
|
|
18
18
|
|
|
19
|
-
result
|
|
19
|
+
result.push(i);
|
|
20
20
|
|
|
21
21
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
22
|
|
|
25
23
|
document.getElementById('render').innerHTML = result.join('<br>');
|
|
26
24
|
|