【javascript】appendChildの動作について

ななし · ‎09-01-2023

埋め込みスクリプトを　<script src="外部アドレス +リクエストパラメータ(変数)"></script>　の形で書きページに描写したいです。

セクションの「page.liquid」を複製し、endstyle と schemaの間のhtml部分を以下のようにスクリプト要素を作成し、appendChildで追加する形に書き換えました。

コンソールログでappendChildの直前まですべてうまくいっていることを確認できているのですが、おそらくappendchildだけ正常動作できていないのか、埋め込みスクリプトが表示されません。

srcに追加するリクエストパラメータを変数ではなく固定値にし、scriptタグをそのまま書き込むと正常表示されることを確認しています。

{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="page-width page-width--narrow section-{{ section.id }}-padding">
    <h2 class="page-title {{ section.settings.heading_size }}">
    </h2>
    <div class="rte">
      <script>
          //formで送った情報を取得し、srcアドレスを作成
          const currentUrl = new URL(location.href)
          const queryString = currentUrl.searchParams
          const srcAdr = '外部アドレス' + queryString.get('id')
          console.log(srcAdr)

          //appendChildで要素を追加
          var sc = document.createElement('script')
          sc.src=srcAdr; //
          console.log(sc)
          var rte = document.querySelector('.rte')
          console.log(rte)
          rte.appendChild(sc)
      </script>
    </div>
  </div>
</div>

{% schema %}