append()やprepend()等でタグを挿入する場合、append(‘<div>’)のような開始タグだけの指定でも、自動で閉じタグを補完してくれるみたいです。
割と一般的なのかもですが、個人的に知らなかったのでメモしておきます。
サンプルコード
for文の中でliを毎回挿入してみます。
HTML
1 | <ul id="sample"></ul> |
JavaScript
1 2 3 4 5 | $(function() { for (var i = 0; i < 5; i++) { $('#sample').append('<li>' + i); };}); |
挿入後は以下のようになります。
1 2 3 4 5 6 7 | <ul id="sample"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul> |
次にfor文の中で挿入する要素を作成して、for文を出た後に挿入をしてみます。
JavaScript
1 2 3 4 5 6 7 | $(function() { var insert = ''; for (var i = 0; i < 5; i++) { insert += '<li>' + i; }; $('#sample').append(insert);}); |
for文を出た後のinsertの中身はこのようになっています。
1 | <li>0<li>1<li>2<li>3<li>4 |
これをappendで挿入すると以下のようになります。
1 2 3 4 5 6 7 | <ul id="sample"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul> |
サンプルコード2
意図しない形の自動補完もあり得るのかいくつか試してみました。
HTML
1 | <div id="sample"></div> |
JavaScript
1 2 3 4 5 6 7 8 9 | $(function() { for (var i = 0; i < 5; i++) { var insert = ''; insert += '<div>'; insert += '<p>' + i + '</p>'; insert += '</div>'; $('#sample').append(insert); };}); |
for文で挿入する要素を作成して、その後appendで挿入する形です。
これの閉じタグを入れ忘れた想定でやってみます。
自動補完のデモページ3
上記の6行目を入れ忘れた場合。
JavaScript
1 2 3 4 5 6 7 8 9 | $(function() { for (var i = 0; i < 5; i++) { var insert = ''; insert += '<div>'; insert += '<p>' + i + '</p>';// insert += '</div>'; // 入れ忘れた場合 $('#sample').append(insert); };}); |
この場合は挿入後は意図したとおりになりました。
1 2 3 4 5 6 7 | <div id="sample"> <div><p>0</p></div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> <div><p>4</p></div></div> |
先ほどと同じようなコードですが、for文の中で挿入するのではなく、for文の中で挿入する要素を作成してから挿入してみます。
JavaScript
1 2 3 4 5 6 7 8 9 | $(function() { var insert = ''; for (var i = 0; i < 5; i++) { insert += '<div>'; insert += '<p>' + i + '</p>';// insert += '</div>'; // 入れ忘れた場合 }; $('#sample').append(insert);}); |
こちらの場合、挿入後はdivが入れ子になり、意図したとおりになりませんでした。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="sample"> <div> <p>0</p> <div> <p>1</p> <div> <p>2</p> <div> <p>3</p> <div> <p>4</p> </div> </div> </div> </div> </div></div> |
閉じタグのつけ忘れなどは割とあり得ると思うので、こういった場合は注意が必要かもしれません。
コメントが承認されるまで時間がかかります。