ゆーものメモ帳

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== 【Twig】jQueryでHTML要素の追加 ======
例えば append などを使用し、HTML要素を追加したい場合、改行コードを省いた以下のような記述になる。
<code>
$('#list').append('<div><h2>xxx</h2><p>text...</p></div>');
</code>
以下のように、改行コードが入っていると **Uncaught SyntaxError: Invalid or unexpected token** というエラーが出てしまう。
<code>
// 改行コードが入っているため動作しない
$('#list').append('<div>
    <h2>xxx</h2>
    <p>text...</p>
</div>');
</code>
よって、Twigでファイル分割したHTML要素を include したい場合は、spaceless を使って以下のように記述する。
<code>
let add_html = '{% spaceless %}{% include 'parts_list.html' %}{% endspaceless %}';

$('#list').append(add_html);
</code>
spaceless は、HTMLタグ間の改行や空白を削除してくれる。
https://twig.symfony.com/doc/2.x/tags/spaceless.html

===== サンプル =====
index.html から「繰り返し＆追加したいHTML要素」を parts_list.html に分離しています。
<code|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>
</code>

<code|parts_list.html>
<div>
    <h2>XXX</h2>
    <p>text...</p>
</div>
</code>

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

ページ用ツール