for内のfetchについて

Question

#概要
ブログの記事内で、fetchで取得したデータを挿入するコードを書いています。

#コード

<script>
if(location.href.match('blogs/news/')){
  var prd_inserts = document.querySelectorAll('.prd_insert')
  for (var i = 0; i < prd_inserts.length; i++) {
    var element = prd_inserts[i];
    if(element.dataset.type === 'Search'){
      var query = element.dataset.query;
      var url = '/search?view=ajaxcustom&q='+ encodeURIComponent(query) +'&options[prefix]=last&type=product';
      console.log('https://myblog.jp'+url)
      var queryOptions = {
        method: 'GET',
        credentials: 'same-origin'
      }
      await fetch(url, queryOptions)
        .then(function(res){
          return res.text();
        })
        .then(function(contents){
          element.insertAdjacentHTML('afterbegin',contents) // 問題がある箇所
        })
    }


  }
}
</script>

#問題点
例えば、querySelectorAll('.prd_insert')で2箇所セレクトし、各部分へデータを挿入しようとすると、なぜか【2番目】にまとめて挿入されてしまいます。
上記のコードの「問題がある箇所」の部分に問題があると思います。
どのようにすれば確実に各箇所にデータを挿入すれば良いかわかりません。

アドバイスお願い致します。

Answer 1

var -> let

Comments

[yuki_90453]

これはベストアンサーザ