appendからappendToへの書き換え

前提

うまく作動してくれません。どの部分が間違っているのかを教えて頂けないでしょうか。
[改訂新版]jQueryポケットリファレンス_サンプルコード_P95 より。

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

Uncaught Error: Syntax error, unrecognized expression: lastname=田中<br>
    jQuery 13
jquery-3.6.0.min.js:2:13639
    jQuery 13

該当のソースコード

HTML5
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6  <link rel="stylesheet" href="css/style.css">
7</head>
8<body>
9  <div class="main">
10    <div class="content">
11      <form>
12        姓<br>
13          <input class="form-input" name="lastname"  type="text"><br>
14        名<br>
15          <input class="form-input" name="firstname" type="text"><br>
16        メールアドレス<br>
17          <input class="form-input" name="email" type="text"><br>
18        電話番号<br>
19          <input class="form-input" name="phone" type="text"><br>
20        編集<br>
21        <select class="form-input" multiple name="job">
22          <option value="">-----選択してください-----</option>
23          <option value="employee">会社員</option>
24          <option value="self-employee">自営業</option>
25          <option value="student">学生</option>
26          <option value="homemeker">主婦・主夫</option>
27        </select><br>
28        <button class="btn" name="submit" type="button">確認</button>
29      </form>
30      <div class="desc"></div>
31    </div><!-- .content -->
32    <div class="footer">
33      <hr>
34      <p class="copyright">2019 xxx all rights reserved.</p>
35    </div>
36  </div><!-- .main -->
37  <script src="js/jquery-3.6.0.min.js"></script>
38  <script src="js/app.js"></script>
39</body>
40</html>

jQuery
1// 編集前
2jQuery(function($) {
3
4  $('.btn').on('click', function() {
5    $('form input:text').each(function() {
6      $('.desc').append(`${ $(this).attr('name') }=${ $(this).val() }<br>`);
7    });
8    $('select option:selected').each(function() {
9      $('.desc').append(`${ $('select').attr('name')}=${ $(this).val() }<br>`);
10    });
11  });
12
13});

jQuery
1// 編集後
2jQuery(function($) {
3
4  $('.btn').on('click', function() {
5    $('form input:text').each(function() {
6      $(`${ $(this).attr('name') }=${ $(this).val() }<br>`).appendTo('.desc');
7    });
8    $('select option:selected').each(function() {
9      $(`${ $('select').attr('name')}=${ $(this).val() }<br>`).appendTo('.desc');
10    });
11  });
12
13});

回答1件

ベストアンサー

できないわけではないですが、すごく煩雑になってやる意味がないので試すだけ無駄です。
appendはテキストノードを追加できますが、appendToに入れるためにはテキストノードをわざわざ作ってjQuery化してappendToすることになります。
結論：やらないでください

それでもどうしてもというならこんな感じです

javascript
1$(function(){
2  $('.btn').on('click', function() {
3    $(':text').map(function(){
4      $(new Text($(this).attr('name')+"="+$(this).val())).appendTo('.desc');
5      $('<br>').appendTo('.desc');
6    });
7    $(':selected').each(function() {
8      $(new Text($(this).closest('select').attr('name')+"="+$(this).val())).appendTo('.desc');
9      $('<br>').appendTo('.desc');
10    });
11  });
12});