🌽

【jQuery】appendとprependの違い

2022/10/21に公開約1,400字

append

append:追加

.append()

指定した要素の最後に指定した内容追加

$('.inner').append('<p>追加した内容</p>');

<div class="inner">
	<p>元々あるもの</p>
	<p>追加した内容</p> ←追加される
</div>

詳細:https://js.studio-kingdom.com/jquery/manipulation/append

.appendTo()

指定した内容を指定した要素の最後に追加

$('<p>追加した内容</p>').appendTo('.inner');

<div class="inner">
	<p>元々あるもの</p>
	<p>追加した内容</p> ←追加される
</div>

詳細:https://js.studio-kingdom.com/jquery/manipulation/append_to

prepend

prepend:前につける

.prepend()

指定した要素の最初に指定した内容追加

$('.inner').prepend('<p>追加した内容</p>');

<div class="inner">
	<p>追加した内容</p> ←追加される
	<p>元々あるもの</p>
</div>

詳細:https://js.studio-kingdom.com/jquery/manipulation/prepend

.prependTo()

指定した内容を指定した要素の最初に追加

$('<p>追加した内容</p>').prependTo('.inner');

<div class="inner">
	<p>追加した内容</p> ←追加される
	<p>元々あるもの</p>
</div>

詳細:https://js.studio-kingdom.com/jquery/manipulation/prepend_to

.append()と.appendTo()の違い

基本的に機能は同じ。
指定する要素と追加するHTMLの記述の順番が異なります。
より詳しい使い分けはこちらの記事にて解説されていました。

prependとprependToについても基本的に機能は同じです。

Discussion

ログインするとコメントできます