回答編集履歴
2
createDocumentFragment の説明文を追加
answer
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
### innerHTML
|
|
2
2
|
|
|
3
|
-
`innerHTML` は上書きするので、innerHTML に代入する前に連結した文字列を入れる必要があります。
|
|
3
|
+
`innerHTML` は**上書き**するので、innerHTML に代入する前に連結した文字列を入れる必要があります。
|
|
4
4
|
|
|
5
5
|
- [innerHTML - JSFiddle](https://jsfiddle.net/699onacr/)
|
|
6
6
|
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
|
|
15
15
|
### insertAdjacentHTML
|
|
16
16
|
|
|
17
|
-
挿入するなら `insertAdjacentHTML` を使います。
|
|
17
|
+
HTMLを**挿入**するなら `insertAdjacentHTML` を使います。
|
|
18
|
+
(※`innerHTML` を `+=` で上書き追加すると、既存のDOM参照は失われるので、お勧めはしません。)
|
|
18
19
|
|
|
19
20
|
- [insertAdjacentHTML - JSFiddle](https://jsfiddle.net/699onacr/1/)
|
|
20
21
|
|
|
@@ -26,10 +27,11 @@
|
|
|
26
27
|
}
|
|
27
28
|
```
|
|
28
29
|
|
|
29
|
-
`innerHTML` を `+=` で上書き追加すると、既存のDOM参照は失われるので、お勧めはしません。
|
|
30
|
-
|
|
31
30
|
### createDocumentFragment()
|
|
32
31
|
|
|
32
|
+
**ノード**を挿入するなら、`createDocumentFragment` を使います。
|
|
33
|
+
今までの方法はHTMLタグを挿入or上書きするものでしたが、ノードで扱う事で特殊文字(`<>&"'`)のエスケープミスによる不具合(XSS)から解放されます。
|
|
34
|
+
|
|
33
35
|
- [createDocumentFragment() - JSFiddle](https://jsfiddle.net/699onacr/2/)
|
|
34
36
|
|
|
35
37
|
```JavaScript
|
1
innerHTML のコード修正
answer
CHANGED
|
@@ -7,9 +7,8 @@
|
|
|
7
7
|
```JavaScript
|
|
8
8
|
var result = [];
|
|
9
9
|
for (var i = 0; i < 5; i++) {
|
|
10
|
-
result
|
|
10
|
+
result.push(i);
|
|
11
11
|
}
|
|
12
|
-
|
|
13
12
|
document.getElementById('render').innerHTML = result.join('<br>');
|
|
14
13
|
```
|
|
15
14
|
|