pushして作成した配列を複数回appendすることができないのは何故

Question

前提・実現したいこと

pushして作成した配列を複数回appendしようとしたときに、ハマりました。
問題自体は、pushを使わないことで解決できたのですが、
どうしてこういった挙動になるのか理解できないので、後学のためにご教授いただきたいです。

発生している問題・エラーメッセージ

片方にchangeイベントを発生させてappendしたあと、
もう片方でchangeイベントを発生させると、最初にappendされたテキストが消えてしまいます。

該当のソースコード

$(function(){
	var a = [];
	a.push($('<span>').attr({value:'a'}).text('a'));
  
	$('#a01').change( function(){
		$('#a03').append(a);
	});
	$('#a02').change( function(){
		$('#a04').append(a);
	});
});

<input type="text" id="a01">
<input type="text" id="a02">
<p id="a03"></p>
<p id="a04"></p>

試したこと

こうすれば理想の挙動になりました。

$(function(){
	var a = ['<span value="a">a</span>'];
  
	$('#a01').change( function(){
		$('#a03').append(a);
	});
	$('#a02').change( function(){
		$('#a04').append(a);
	});
});

バージョン情報

GoogleChrome 64.0.3282.186
jQuery 3.2.1

Answer 1

.append(jQueryオブジェクト)は、jQueryオブジェクトで指しているHTML要素を移動します。もとの例ではHTML要素を1個しか作っていないので、.appendのたびに移動して、もと入れたところからは消えてしまいます。

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned) - jQueryリファレンスより

一方で、HTMLテキストを.appendする場合には、その度ごとにHTML要素が生成されるので、前のが消えることは起きません。

Comments

[petaco]

appendの引数にjQueryオブジェクトを指定した場合は、
2回目以降はjQueryオブジェクトの移動処理になるという仕様があったんですね。
よく理解できました。ありがとうございました。

Answer 2

そもそも配列で処理する必要がないですね

  var a = '<span value="a">a</span>';

で指定したaをappendする分には単にテキストを流し込んでいるので
変わるたびにテキストが追加されますが

  var a = $('<span value="a">a</span>');

でappendするとa自体がjQueryのオブジェクトですので
最初は単に追加される処理ですが、その後は移動処理になります

Comments

[petaco]

ありがとうございます。
appendの仕様がよく理解できました。単純に追加し続けるだけのものだと勘違いしていました。