プログラミング日記

プログラミング、英語、アメリカ、Apple、自転車とか

jQueryにおける、append()とhtml()の違い

最近、例のJavaScriptの本を読み終えた。
タイトルの通り、なかなか本格的な本だった。
関数の引数や、オブジェクト指向の部分なんかは他の言語と違った、JavaScriptの特徴を詳しく解説していてわかりやすかった。
ただ、まったくのプログラミング初心者が最初に読む本ではない。
他の言語の経験者、どちらかというとJavaやC++などのクラスベースのオブジェクト指向言語をやったことがある人が読むのに適している本だと思う。

最近はjQueryやJavaScriptのライブラリとかをいじって遊んでいる。

jQueryで$.html()と$.apend()の違いをメモっとく。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Text jQuery</title>
</head>
<body>
	<p>Practice</p>
	<div>
		<p>hi1</p>
		<p>hi2</p>
		<p>hi3</p>
	</div>
	<script src="jquery.js"></script>
	<script>
		$(function() {
			$('div').html('<p>hi4</p>');
		});
	</script>
</body>
</html>

上のように$.html()を使うと、$('div')の子要素は上書きされて、

hi4

だけしか表示されない。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Text jQuery</title>
</head>
<body>
	<p>Practice</p>
	<div>
		<p>hi1</p>
		<p>hi2</p>
		<p>hi3</p>
	</div>
	<script src="jquery.js"></script>
	<script>
		$(function() {
			$('div').append('<p>hi4</p>');
		});
	</script>
</body>
</html>

htmlの部分をappendに変えただけのコードだけど、このコードでは、

hi4

はdiv要素に「追加」されるので、もともとあったp要素も削除されずに済んだりする。

以上。