jquery - 在 shopify 液体模板中插入多个跨度

Question

我想在NodeJS 中使用 jquery 在 Shopify 的section/product-template.liquid模板中添加 3 个跨度作为占位符。

模板看起来像这样。

<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 中各添加一个 span。

当我将上面的完整字符串转换为 jQuery 时，它使我只能访问具有类“product-template__container”的 div，但不能访问在 {%...%} 内有条件地呈现的其他元素。

如何添加跨度条件元素？