【jQuery】append()にクソ長文字列を書くのをやめませんかみたいな話

この記事の書き方はXSSできてしまうので危険です。

@tadsanさんよりこのコードだとXSS攻撃されてしまうというご指摘を受けました。
こちらの記事のコードで実装するのは危険です。
戒めのために取り消し線を付けて残しておきます。
タイトルのようなことがしたい場合こちらのコメントのような実装をしてください。

環境

PHP 8.1
jQuery 3.6.1
PHPSTORM

本文

例えば要素Aを加工して同ページの要素Bにappend()するときこんなコード書いていませんか。

    <div id="content_a">
        <p id="title">Hello</p>
        <p id="text">World</p>
        <p id="creat_dt">2022 0902 15:00</p>
    </div>
    
    <div id="content_b">
    </div>
    
    <script>
        const appendText = "<p>タイトル : " +  $('#title').text() + "</p>" + "<p>本文 : " + $('#text').text() + "</p>" + "<p>作成日 : " + $('#creat_dt').text() + "</p>";
        $('#content_b').append(appendText);
    </script>

自分の場合、とりあえず表示できればいいやみたいな感覚でこんな書き方をしていました。
このテキスト量ならまだ良いですが、もっと長くなってくるととても書いていられません。
また、文字列で書いている都合上エディタの補完が効きづらく、見栄えもひどいです。

そんな問題をPHPとAjaxの力を借りて解決しようという話です。

テンプレートファイルを用意
こんな.phpファイルを用意しておきます。

example.php

<p>タイトル : <?php echo $_POST['title'] ?></p>
<p>本文 : <?php echo $_POST['text'] ?></p>
<p>作成日 : <?php echo $_POST['create_dt'] ?></p>

View側のAjaxで上記example.phpファイルを叩きます。

$(function appender() {
    $.ajax({
        url: '/example.php', 
        type: 'post',
        data: {
            'title': $('#title').text(),
            'text': $('#text').text(),
            'create_dt': $('#creat_dt').text()
        },
    })
        .done(function (response) {
            // responseの中身
            // <p>タイトル : Hello</p>
            // <p>本文 : World</p>
            // <p>作成日 : 2022 0902 15:00</p>
            $('#content_b').append(response);
        });
});

AjaxのPOST通信で要素の配列を予め用意しているテンプレートに渡し、置換してもらったhtmlを受け取っています。
可読性も増しましたし、何より再利用性がある。

終わり