jQueryでappendメソッドを使って要素内を書き換えたい

Question

前提・実現したいこと

jQueryでappendメソッドを使ってHTML内のdiv内を書き換えたいのですが、
うまくいきません。。
書き換える部分のHTMLはThymeleafで書いています。

やり方としては、jsが発火したら要素内を全削除して、新しくappendで追加していく風にしています。
ご教授いただければと思います。

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

Uncaught TypeError: $(...).append$ is not a function

該当のソースコード

function testSelect(obj){
	  var objVar = obj.value;
	  var count = 0;
	  $.ajax({
	    "type"     : "GET",
	    "url"      : "/testSelect",
	    "data"     : {testNm: objVar},
	    "dataType" : "json",
	  }).then(
	  function (data) {
		  $('.shop_list').html('');
	    data.forEach(function(x){
	    $('<div>')
	      .append$('.shop_name').append$('<h2>').append($('<a href="/area/'+ x.areaId +'">').text(x.areaNm));
	      count++;
	    });
	  },
		function () {
		//通信失敗
		alert("読み込み失敗");
	});
	};

以下の「<h2 class="shop_name">」部分をjsから書き換えたいです。

<div class="d-flex my-box-light justify-content-center flex-wrap mb-2" style="height: 200px;">
			<div th:each="obj2 : ${topAreaList}">
			<div class="shop_list">
				<div style="width:250px;height:250px;background-color:#FFFFFF;" class="border border-dark rounded">
					<h2 class="shop_name"><a th:href="@{/area/__${obj2.areaId}__}" th:text="${obj2.areaNm}"></a></h2>
				</div>
			</div>
			</div>
	</div>

Answer 1

エラーの通りappend$になってます。
.append()はメソッドですし、その書き方だと.append$()という名前のメソッドを呼び出そうとしています。
セレクタ入り組んでいて分かりづらくなるのでしたら、無理につなげず、それぞれの要素を一度変数に受けてメソッドに投入するようにしてはどうでしょう。

例：

//１行
$('div').append($('.hoge').append($('.fuga')));

//変数で一度受ける
let fuga = $('.fuga');
let hoge = $('.hoge').append(fuga);
$('div').append(hoge);

Comments

[takahiro00]

ありがとうございます。
無事解決しました。

[m.ts10806]

直接的には書いてませんが、この回答はあくまで「エラー読んで」としか書いてません。