====== 【Twig】jQueryでHTML要素の追加 ====== 例えば append などを使用し、HTML要素を追加したい場合、改行コードを省いた以下のような記述になる。


$('#list').append('xxx
text...');

以下のように、改行コードが入っていると **Uncaught SyntaxError: Invalid or unexpected token** というエラーが出てしまう。


// 改行コードが入っているため動作しない
$('#list').append('
    xxx
    text...
');

よって、Twigでファイル分割したHTML要素を include したい場合は、spaceless を使って以下のように記述する。


let add_html = '{% spaceless %}{% include 'parts_list.html' %}{% endspaceless %}';

$('#list').append(add_html);

spaceless は、HTMLタグ間の改行や空白を削除してくれる。 https://twig.symfony.com/doc/2.x/tags/spaceless.html ===== サンプル ===== index.html から「繰り返し＆追加したいHTML要素」を parts_list.html に分離しています。

{% for i in 1..5 %} {% include 'parts_list.html' %} {% endfor %}

XXX

text...