回答編集履歴
1
修正
test
CHANGED
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
jQueryの要素生成は、innerHTMLよりもcreateElementに近いです。jQueryを使うのならば基本的にはjQueryで書くのが良いと思います。チェーンできるので。
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
createElementなどは「要素オブジェクトを生成→DOMに追加」というプロセスであるのに対して、innerHTMLは「対象要素の中身をHTMLテキストの文字列に変換→文字列を書き換え→文字列をDOMに変換→中身を全て新しいDOMで置き換え」となるため、とくにinnerHTMLが大きくなるほど無駄が多いです。最後に要素を追加するだけでもinnerHTML全体が再読み込みされるので。
|
|
6
|
+
|
|
7
|
+
またinnerHTMLを弄るとDOM構造を破壊してしまうことに対してなんの保険もありませんし、script要素はDOMに追加された瞬間に実行されるのでinnerHTMLで書き込むと実行されません。
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
結局の所どれを使えば良いのかですが、jQueryなら$.appendで良いでしょう。ピュアJSならcreateElementか、insertAdjacentHTMLです。
|
|
12
|
+
|
|
13
|
+
ですがinsertAdjacentHTMLでHTMLを要素に変換して挿入した場合、その要素を変数に入れて弄るにはgetElementする必要があるので、すぐに利用したい場合はやはりcreateElementするのが良いでしょう。
|
|
14
|
+
|
|
15
|
+
ちなみにappendChildは子要素を戻り値にとるので次のようにも書けます。
|
|
16
|
+
|
|
17
|
+
```javascript
|
|
18
|
+
|
|
19
|
+
var li = ul.appendChild(document.createElement('li'));
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
(修正前)
|
|
28
|
+
|
|
1
29
|
まずそのコードだと動かないです。
|
|
2
30
|
|
|
3
31
|
jqueryなどを使わない場合、基本的にDOMに要素を追加するには、createElementで要素を作ってappendChildする必要があります。とくにscript要素はこれ以外で追加しても実行されません。
|