在shopify液体模板中插入多个跨距

Question

我想在NodeJS中使用jquery在Shopify的 sections / product-template.liquid 模板中的不同位置添加3个spans作为占位符。

模板看起来像这样。

<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
 <meta itemprop="name" content="{{ product.title }}">
 <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
</div>

{% if collection %}
 <p class="text-center return-link-wrapper">
  <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
    {% include 'icon-arrow-left' %}
    {{ 'products.product.back_to_collection' | t: title: collection.title }}
  </a>
 </p>
{% endif %}

{% unless product == empty %}
 <span id="ProductJson-{{ section.id }}">
  {{ product | json }}
 </span>
{% endunless %}

我想在div，p和span中添加一个跨度，如上所示。

当我将上面的完整字符串转换为jQuery时，它只允许我访问带有'product-template__container'类的div，而不能访问{％...％}内有条件呈现的其他元素。

如何添加span条件元素？