jQuery の append 等を使って入れ子や改行のある HTML を追加する方法

皆さん、こんにちは。管理人です。今回は、「jQuery の append 等を使って入れ子や改行のある HTML を追加する方法」について述べたいと思います。

`（バッククォート）で HTML を囲う

これが一番簡単だと思われるやり方です。具体例で説明します。例えば、

<div class="the-class"></div>

の中に

<table>
    <tr class="class1">
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr class="class2">
        <td>d</td>
        <td>e</td>
        <td>f</td>
    </tr>
    <tr class="class3">
        <td>g</td>
        <td>h</td>
        <td>i</td>
    </tr>
</table>

という HTML を（jQuery を使って）入れたい場合は、入れたい HTML を`（バッククォート、Shift + @ で入力できます）で囲って変数に代入します。（ただし、変数に代入しなくても動きます。）そして、append します。そうすると、jQuery は次のようになります。

$(document).ready(function() {
    const output = `
        <table>
            <tr class="class1">
                <td>a</td>
                <td>b</td>
                <td>c</td>
            </tr>
            <tr class="class2">
                <td>d</td>
                <td>e</td>
                <td>f</td>
            </tr>
            <tr class="class3">
                <td>g</td>
                <td>h</td>
                <td>i</td>
            </tr>
        </table>`;
    
    $('.the-class').append(output);
});

これで <div class="the-class"></div> の中に table 要素が追加されます。

今回は append で説明しましたが、after（指定した要素の後に追加）や before（指定した要素の前に追加）などでも同様です。

なお、PHP の変数に格納された HTML を append したい場合は、

$(.class や #ID).append(`<?php echo $変数名; ?>`);

とすれば良いです。