Javascript 使用不同的变量遍历HTML代码块

我正在尝试做一个循环，以避免为包含8张照片的Instagram小部件一直重写代码。每个循环都有自己的编号（f.e.theme.instagram\u img\u 1到theme.instagram\u img\u 8），但循环中存在外部变量，会产生问题

{% if theme.instagram_img_1 %}
  <div class="col-12 col-sm-6 col-lg-3 pb30">
    <a href="{{ theme.instagram_url_1 }}">
      <figure>
      <div class="instagram-click"><i class="fa fa-3x fa-instagram"></i></div>
      <img src="{{ 'img-instagram-img-1.jpg' | url_asset }}" width="100%">
      </figure>
    </a>
  </div>
{% endif %}
{% if theme.instagram_img_2 %}
  <div class="col-12 col-sm-6 col-lg-3 pb30">
    <a href="{{ theme.instagram_url_2 }}">
      <figure>
      <div class="instagram-click"><i class="fa fa-3x fa-instagram"></i></div>
      <img src="{{ 'img-instagram-img-2.jpg' | url_asset }}" width="100%">
      </figure>
    </a>
  </div>
{% endif %}

{%if theme.instagram\u img\u 1%}
{%endif%}
{%if theme.instagram\u img\u 2%}
{%endif%}

我希望循环总共进行8次。这就是我到目前为止的想法：

<div id="myHTMLWrapper"></div>

<script>
var wrapper = document.getElementById("myHTMLWrapper");
var myHTML = '';
for (var i = 0; i < 8; i++) {
  myHTML += '{% if theme.instagram_img_' + (i + 1) + ' %}<div class="col-12 col-sm-6 col-lg-3 pb30">< a href = "{{ theme.instagram_url_1 }}" ><figure><div class="instagram-click"><i class="fa fa-3x fa-instagram"></i></div><img src="{{ 'img-instagram-img- ' + (i + 1) + '.jpg' | url_asset }}" width="100%"></figure></a></div>{% endif %}';
}
wrapper.innerHTML = myHTML
</script>

var wrapper=document.getElementById（“myHTMLWrapper”）；
var myHTML=''；
对于（变量i=0；i<8；i++）{
myHTML+='{%if-theme.instagram\u-img++（i+1）+'%}{%endif%}”；
}
wrapper.innerHTML=myHTML

此行中有一个错误：

myHTML += '{% if theme.instagram_img_' + (i + 1) + ' %}<div class="col-12 col-sm-6 col-lg-3 pb30">< a href = "{{ theme.instagram_url_1 }}" ><figure><div class="instagram-click"><i class="fa fa-3x fa-instagram"></i></div><img src="{{ 'img-instagram-img- ' + (i + 1) + '.jpg' | url_asset }}" width="100%"></figure></a></div>{% endif %}';

myHTML+='{%if-theme.instagram\u-img++（i+1）+'%}{%endif%}”；

更改此项：

< a href = "{{ theme.instagram_url_1 }}" >

为此：

< a href = "{{ theme.instagram_url_' + (i + 1) + ' }}" >

哪些外部变量以及出现的问题是什么？