如何动态创建script元素并结合本地变量设置其src属性？

可以通过原生JavaScript手动创建<script>元素，完全控制它的插入位置，具体实现如下：

实现代码 #

// 1. 定义本地变量（替换成你的实际值）
const questionOneValue = "用户的答案内容";

// 2. 指定父元素（比如通过ID获取，也可以用其他选择器）
const parentElement = document.getElementById("form-container");

// 3. 创建script元素
const jotFormScript = document.createElement("script");

// 4. 拼接带参数的src链接，注意对参数值编码避免特殊字符问题
const baseUrl = "https://form.jotform.com/jsform/222233362971049?questionOne=";
jotFormScript.src = baseUrl + encodeURIComponent(questionOneValue);

// 5. 可选：设置script的type属性（现代浏览器可省略，但加上更兼容）
jotFormScript.type = "text/javascript";

// 6. 将script元素插入到指定父元素中
parentElement.appendChild(jotFormScript);

关键细节说明 #

• 参数值编码：使用encodeURIComponent()处理变量值，避免空格、特殊字符导致的URL格式错误，确保预填充功能正常。
• 父元素选择：除了getElementById，还可以用document.querySelector()选择任意CSS选择器对应的元素（比如.form-wrapper），灵活适配页面结构。
• 加载时机：确保代码在DOM加载完成后执行，要么把代码放在页面底部，要么包裹在DOMContentLoaded事件监听里：

  document.addEventListener("DOMContentLoaded", function() {
    // 上面的代码放在这里
  });
  

这样既实现了动态拼接预填充参数，又能精准控制脚本插入的位置，完全替代document.write的方案。

内容的提问来源于stack exchange，提问作者NickDash