【Twig】jQueryでHTML要素の追加

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

$('#list').append('<div><h2>xxx</h2><p>text...</p></div>');

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

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

よって、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 に分離しています。

index.html

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
    {% for i in 1..5 %}
{% include 'parts_list.html' %}
    {% endfor %}
</div>
<button id="btn-add">add</button>
<script>
$(function(){
  let add_html = '{% spaceless %}{% include 'parts_list.html' %}{% endspaceless %}';

  $('#btn-add').on('click', function(){
    $('#list').append(add_html);
  });
});
</script>
</html>

parts_list.html

<div>
    <h2>XXX</h2>
    <p>text...</p>
</div>

ゆーものメモ帳

サイドバー

【Twig】jQueryでHTML要素の追加

サンプル

コメント

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

サイドバー

【Twig】jQueryでHTML要素の追加

サンプル

コメント

ページ用ツール