knowledge::short

忘れがちなので、備忘録。

記法A

            $('#activity_area-wrapper').prepend(
                '<div class="row form-group offset-md-1 group-class-dynamic">'
                    + '活動拠点の情報が掲載されます。'
                + '</div>'
            );

• 1行ごとにいちいち引用符（または2重引用符）で文字列を括らねばならない。
• 変数を混ぜるのが楽。

記法B

let html_template = `
                <div class="area">
                    <div class="heading">
                        <div class="title">__@NAME__</div>
                        <div class="number">物件番号: __@CODE__</div>
                    </div>
                    <div class="image"><img src="fuga.jpg" alt=""></div>
                </div>
            </td>
`;

let html = html_template
    .replace(/__@NAME__/g, item.name)
    .replace(/__@CODE__/g, item.code);

• 複数行のHTMLソースを代入する記載を行うとき使いやすい。
• 変数を混ぜるときは.replace()を使わねばならない。

この他にもvue.jsとかライブラリを使った手法もあると思うが、割愛。

関連するタグ

JS