如何在循环内正确将Twig模板追加至指定div？

常见原因及对应解决方案 #

1. 后端Twig渲染时循环位置错误 #

如果是后端直接渲染模板，大概率是把循环逻辑写在了目标div的外部，导致渲染内容直接输出到div之后。

错误代码示例：

<div id="{{ divId }}"></div>
{% for templateType in templateTypes %}
    {% include 'templates/' ~ templateType ~ '.twig' %}
{% endfor %}

修正代码：
将循环嵌套到目标div内部，确保所有渲染的模板内容都被包裹在div容器中：

<div id="{{ divId }}">
    {% for templateType in templateTypes %}
        {% include 'templates/' ~ templateType ~ '.twig' %}
    {% endfor %}
</div>

2. 前端动态插入时选择器/插入方法错误 #

如果是点击后通过JS动态加载并插入Twig渲染后的HTML，可能是没有正确定位目标div，或是使用了错误的插入方式。

错误代码示例：

document.querySelector('.trigger-btn').addEventListener('click', () => {
    const templateList = ['type1', 'type2', 'type3'];
    templateList.forEach(type => {
        const renderedHtml = `<div class="template-content">${type} content</div>`;
        // 错误：直接插入到body而非目标div内部
        document.body.innerHTML += renderedHtml;
    });
});

修正代码：
先获取目标div元素，再将内容插入到其内部：

document.querySelector('.trigger-btn').addEventListener('click', () => {
    const targetDiv = document.getElementById('{{ divId }}');
    const templateList = ['type1', 'type2', 'type3'];
    
    templateList.forEach(type => {
        const renderedHtml = `<div class="template-content">${type} content</div>`;
        // 推荐用insertAdjacentHTML避免innerHTML的重渲染性能问题
        targetDiv.insertAdjacentHTML('beforeend', renderedHtml);
        // 简单场景也可使用：targetDiv.innerHTML += renderedHtml;
    });
});

3. 子Twig模板存在HTML结构错误 #

如果子模板里有未闭合的标签、嵌套逻辑错误，浏览器会自动修正DOM结构，导致视觉上内容跑到目标div外部。

错误模板示例（如templates/type1.twig）：

<div class="item">
    <h3>Type 1 Title
    <p>Some content here
</div>

修正方法：
检查所有子模板的HTML结构，确保标签正确闭合、嵌套合理：

<div class="item">
    <h3>Type 1 Title</h3>
    <p>Some content here</p>
</div>

内容的提问来源于stack exchange，提问作者Manav Chauhan