【jQuery】appendとappendToメソッドの構文、用途、速度の違い

2021.02.20　Posted by Coding_team

Webプログラミング

4404610_s こんにちはウェブラボ技術メモです。

jQueryで要素内の末尾にHTMLを挿入したい場合、代表的なappend()メソッドがあります。
しかし、それと似たappendTo()メソッドというものも存在します。
この2つについて、何が違うのか、どう使い分けるのか、またパフォーマンスに大きな差はあるのか調査しました。

構文の違い

例えば下記のような要素において、#textの末尾に「World!」を追加したい場合

<p id="text">Hello!</p>

1	<p id="text">Hello!</p>

↓append()メソッドではこのように

$("#text").append('<span>World!</span>');

1	$("#text").append('<span>World!</span>');

↓appendTo()メソッドではこのように書きます

$('<span>World!</span>').appendTo("#text");

1	$('<span>World!</span>').appendTo("#text");

このように、書き方の順番が逆なだけです。

使い分け

この2つのメソッド、書き方は違うけど動きは同じだからどっちでもいいじゃん？と思いますが、その後の記述内容により使い分けたほうがいい場合があります。
それは、返り値の違いです。

例えば
#textの末尾に「World!」を追加した後、
メソッドチェーンで「Hello!World!」ごと赤文字にしたい場合、append()を使います

$("#text").append('<span>World!</span>').css("color","red");

1	$("#text").append('<span>World!</span>').css("color","red");

次に
#textの末尾に「World!」を追加した後、
メソッドチェーンで「World!」だけ赤文字にしたい場合、appendTo()を使います

$('<span>World!</span>').appendTo("#text").css("color","red");

1	$('<span>World!</span>').appendTo("#text").css("color","red");

また、このように変数定義すると変数の中身が明確に違うのがわかります

var target1=$("#text").append('<span>World!</span>');
var target2=$('<span>World!</span>').appendTo("#text");

console.log(target1);//$("#text")
console.log(target2);//$("span")

var target1=$("#text").append('World!');

var target2=$('World!').appendTo("#text");

console.log(target1);//$("#text")

console.log(target2);//$("span")

このように、要素内に追加したその後、何をしたいのかによって使い分けましょう。

パフォーマンス

この2つのメソッドに処理速度の差があるのか調べました。

結論から言うと、append()の方が若干早いですが、大差ないです。

#textの末尾に「World!」を1万回追加する作業を
performance.mark()を使用して計測しました

$(function(){
	performance.mark('myPerformanceStart')//計測開始
	
	var text=$("#text");
	for(var i=0;i<10000;i++){
		//append
		text.append('<span>World!</span>');

		//appendTo
		$('<span>World!</span>').appendTo(text);
	}
	
	performance.mark('myPerformanceEnd')//計測終了
	performance.measure(
		'myPerformance',
		'myPerformanceStart',
		'myPerformanceEnd'
	);
	const results = performance.getEntriesByName('myPerformance');//計測結果
	console.log(results[0]);
});

$(function(){

performance.mark('myPerformanceStart')//計測開始

var text=$("#text");

for(var i=0;i<10000;i++){

//append

text.append('World!');

//appendTo

$('World!').appendTo(text);

}

performance.mark('myPerformanceEnd')//計測終了

performance.measure(

'myPerformance',

'myPerformanceStart',

'myPerformanceEnd'

);

const results = performance.getEntriesByName('myPerformance');//計測結果

console.log(results[0]);

});

その結果
append()は160～210msで安定、appendTo()は260～300msで安定でした。

いかがでしたか？
ちなみに、要素内の先頭に挿入するprepend()、prependTo()メソッドについても、これまでと同じことが言えます。パフォーマンスも同様でした。
今までappendTo()の存在は知ってましたが、append()しか使ったことがありませんでした。ですが場面によって使い分けができるとスマートですね。
以上ウェブラボ技術メモでした。

関連記事こちらの記事も合わせてどうぞ。