如何将JavaScript变量值插入到HTML内容中

你当前使用的字符串拼接是可行的实现方案，注意引号配对规则即可，对应代码如下：

const insertHtml = '<p>\n    查看你的信用评分 <a href="http://someaddress.com?first_name=' + first_name + '" target="_blank">点击此处</a>\n</p>';

也可以根据场景选择以下更优的实现方案：

• 方案1：ES6模板字符串（语法更简洁，无需手动处理加号拼接和引号转义）

const insertHtml = `<p>
    查看你的信用评分 <a href="http://someaddress.com?first_name=${first_name}" target="_blank">点击此处</a>
</p>`;

• 方案2：原生DOM操作（安全性更高，可规避XSS注入风险）

// 创建p标签
const pTag = document.createElement('p');
pTag.innerText = '查看你的信用评分 ';
// 创建a标签
const aTag = document.createElement('a');
aTag.target = '_blank';
// 对参数做URL编码避免特殊字符导致解析错误
aTag.href = `http://someaddress.com?first_name=${encodeURIComponent(first_name)}`;
aTag.innerText = '点击此处';
// 拼接节点并插入到页面
pTag.appendChild(aTag);
// 此处可替换为你需要插入的目标容器
document.body.appendChild(pTag);

提示：如果插入的变量来自用户输入等不可信来源，请勿直接拼接HTML字符串，优先选择DOM操作方案，避免恶意代码注入攻击。

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