jquery がエラーを報告します。 Node' で 'appendChild' の実行に失敗しました。新しい子要素です。

このエラーが報告され、30分ほどの作業で原因が特定されました。正確なデモは以下の通りです。

htmlの中の要素です。

<div class="box">
  <div class="inner"></div>
</div>

<div class="addEle">
  <div class="inner"></div>
</div>

var box=$(".box");
var addEle=$("addEle");
box.find(".inner").apend(addEle);

これは追加したい要素です。

<div class="box">
  <div class="inner">
	<div class="addEle">
	  <div class="inner">
		<div class="addEle">
		  <div class="inner">
			<div class="addEle">
			  <div class="inner">
				...
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	</div>
  </div>
</div>

以下は、jqueryのコードです。

box.children(".inner").apend(addEle);

理由

最後の文がポイントです： box.find(".inner").apend(addEle); この文の意味は、box要素でその下のinnerを選択し、addEle要素をinnerに追加することです。
ここで問題があって、find(".inner")をすると、ボックス内の元のinnerだけでなく、付加されるaddEleのinnerも見つかってしまうのです（ここがポイント、ものによってはよくわからないのですが）。
このとき、上の文は、addEleをaddEleの下のinnerに追加し、新しく追加されたaddEleがinnerを持つので、再びaddEleをaddEleの下のinnerに追加し、新しく追加されたaddEleが再びinnerを持ち、デッドループが発生する、というものです。
等価：inner(addEle(inner()))です。

その結果、次のようになります。

<div class="box">
  <div class="inner">
	<div class="addEle">
	  <div class="inner">
		<div class="addEle">
		  <div class="inner">
			<div class="addEle">
			  <div class="inner">
				...
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	</div>
  </div>
</div>

解決策

私のような場合、find(".inner")はできず、以下のようにinnerをピンポイントで指定することになります。

box.children(".inner").apend(addEle);