如何用JavaScript或jQuery在head中动态插入含变量声明的script标签

一、JavaScript/jQuery中声明变量的方式 #

不管是原生JavaScript还是jQuery（毕竟jQuery只是基于JS的工具库），变量声明都遵循JS的语法规则：

• 用var声明函数作用域的变量：var DID = 256577;
• 用let声明块级作用域的变量：let DID = 256577;
• 用const声明块级作用域的常量（值不可修改）：const DID = 256577;

二、动态插入包含变量声明的内部Script标签 #

你之前的代码问题很明确：错误地把变量值赋值给了script元素的src属性——这个属性是用来加载外部JS文件的，而你需要的是内联脚本（标签内部直接包含代码），所以得给script元素添加文本内容，而非设置src。

原生JavaScript实现方案

// 先声明目标变量
const DID = 256577;
// 创建script元素
const scriptEl = document.createElement('script');
scriptEl.type = 'text/javascript';
// 给script元素添加内部代码文本
scriptEl.textContent = `var DID=${DID};`;
// 插入到head标签中
document.head.appendChild(scriptEl);

这段代码执行后，会在head里生成你期望的标签：<script type="text/javascript"> var DID=256577; </script>

jQuery实现方案

如果用jQuery的话，代码会更简洁直观：

const DID = 256577;
// 直接拼接脚本内容并插入到head中
$('head').append(`<script type="text/javascript"> var DID=${DID}; </script>`);

jQuery会自动处理脚本的插入和执行逻辑，最终效果和原生代码完全一致。

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