jQueryでタグが自動補完される

append()やprepend()等でタグを挿入する場合、append(‘<div>’)のような開始タグだけの指定でも、自動で閉じタグを補完してくれるみたいです。
割と一般的なのかもですが、個人的に知らなかったのでメモしておきます。

サンプルコード

for文の中でliを毎回挿入してみます。

HTML

<ul id="sample"></ul>

JavaScript

$(function() {
	for (var i = 0; i < 5; i++) {
		$('#sample').append('<li>' + i);
	};
});

自動補完のデモページ1
　

挿入後は以下のようになります。

<ul id="sample">
	<li>0</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

次にfor文の中で挿入する要素を作成して、for文を出た後に挿入をしてみます。

JavaScript

$(function() {
	var insert = '';
	for (var i = 0; i < 5; i++) {
		insert += '<li>' + i;
	};
	$('#sample').append(insert);
});

自動補完のデモページ2
　

for文を出た後のinsertの中身はこのようになっています。

<li>0<li>1<li>2<li>3<li>4

これをappendで挿入すると以下のようになります。

<ul id="sample">
	<li>0</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

サンプルコード2

意図しない形の自動補完もあり得るのかいくつか試してみました。

HTML

<div id="sample"></div>

JavaScript

$(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

$(function() {
	for (var i = 0; i < 5; i++) {
		var insert = '';
		insert += '<div>';
		insert += '<p>' + i + '</p>';
//		insert += '</div>'; // 入れ忘れた場合
		$('#sample').append(insert);
	};
});

自動補完のデモページ4
　

この場合は挿入後は意図したとおりになりました。

<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

$(function() {
	var insert = '';
	for (var i = 0; i < 5; i++) {
		insert += '<div>';
		insert += '<p>' + i + '</p>';
//		insert += '</div>'; // 入れ忘れた場合
	};
	$('#sample').append(insert);
});

自動補完のデモページ5
　

こちらの場合、挿入後はdivが入れ子になり、意図したとおりになりませんでした。

<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>

閉じタグのつけ忘れなどは割とあり得ると思うので、こういった場合は注意が必要かもしれません。