如何将附加到HTML DOM中的当前位置[重复]

问题描述 投票:0回答:1

以前,我使用the solution heredocument.head.appendChild(script);

这在<script>内附加了<head>

如何在当前位置/生成<script>的位置附加/插入<script>

通过生成脚本,是指我将脚本放置在体内某处以在该位置生成3个随机<script>中的1个。

感谢帮助。

编辑,我已经将原始脚本更新为:

<div>
<script type="text/javascript">
var scripts = [
    { src: "https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js", "data-opf-uid": "p2c187780f44", "data-opf-params": "borderColor=#22a8cc&borderSize=5px&embed=true&formHeight=633&formWidth=60%&popPosition=mc&instance=n768494876"},
    { src: "https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js", "data-opf-uid": "p2c187780f45",  "data-opf-params": "borderColor=#22a8cc&borderSize=5px&embed=true&formHeight=633&formWidth=60%&popPosition=mc&instance=n1627526329" },
    { src: "https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js", "data-opf-uid": "p2c187780f46", "data-opf-params": "borderColor=#22a8cc&borderSize=5px&embed=true&formHeight=633&formWidth=60%&popPosition=mc&instance=2011105601" },
];
// Add the element to the document
const currentScript = document.currentScript;
window.addEventListener('DOMContentLoaded', () => {
  const newScript = document.createElement('script');
  // Select a random entry from above list
  var selected = scripts[Math.floor(Math.random()*scripts.length)];
  selected.type='text/javascript';
  // Assign the selected properties to the element as attributes
  for (var prop in selected) {
    script.setAttribute(prop, selected[prop]);
  }
  newScript.textContent = 'console.log("new script"); console.log(document.body.innerHTML);';
  currentScript.insertAdjacentElement('afterend', newScript);
 });
</script>
</div>

但是这还没有在原始脚本之后追加脚本。

javascript dom
1个回答
1
投票

您可以使用document.currentScript引用当前正在运行的脚本,并使用insertAdjacentElement在正在运行的脚本之后插入新脚本:

<div>
  <script>
    const newScript = document.createElement('script');
    newScript.textContent = 'console.log("new script"); console.log(document.body.innerHTML);';
    document.currentScript.insertAdjacentElement('afterend', newScript);
  </script>
</div>

如果第一个脚本异步插入另一个脚本,则必须在异步回调运行之前保存对currentScript的引用:

<div>
  <script>
    const currentScript = document.currentScript;
    window.addEventListener('DOMContentLoaded', () => {
      const newScript = document.createElement('script');
      newScript.textContent = 'console.log("new script"); console.log(document.body.innerHTML);';
      currentScript.insertAdjacentElement('afterend', newScript);
    });
  </script>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.