使用jQuery创建HTML元素时如何注入JavaScript变量的实际值？

我有一段jQuery/JavaScript代码用于在页面上创建新按钮：

$("#prefixed-list").append(`
<li class="list-group-item d-flex my-auto mx-auto border-0" order="9999999999">
  <button type="button" class="btn btn-info mt-3" onClick="prefixCall(urlDomain, searchContent, offset)">Load More</button>
</li>
  `);

其中urlDomain、searchContent、offset均为当前函数内定义的变量。目前页面生成的按钮代码为：

<button type="button" class="btn btn-info mt-3" onclick="prefixCall(urlDomain, searchContent, offset)">Load More</button>

我希望按钮的onClick事件中传入的是这些变量的实际值而非变量名，请问该如何实现？

方法1：模板字符串插值注入实际值 #

直接在模板字符串里把变量的实际值插入到onClick的参数中，注意字符串类型的变量需要用引号包裹，避免生成的HTML出现语法错误：

$("#prefixed-list").append(`
<li class="list-group-item d-flex my-auto mx-auto border-0" order="9999999999">
  <button type="button" class="btn btn-info mt-3" onClick="prefixCall('${urlDomain}', '${searchContent}', ${offset})">Load More</button>
</li>
`);

• 字符串类型的urlDomain和searchContent用单引号包裹插值结果，确保生成的HTML中参数是字符串字面量
• 数字类型的offset直接插入即可，无需额外包裹

⚠️ 注意：如果变量值包含单引号、双引号或特殊字符，需要先做转义处理（比如用encodeURIComponent），避免破坏HTML结构。

方法2：使用事件绑定（推荐） #

内联onClick事件容易引发作用域混乱和XSS风险，更稳妥的方式是先创建元素，再通过jQuery绑定事件，直接捕获当前作用域的变量：

// 创建按钮元素
const $button = $('<button type="button" class="btn btn-info mt-3">Load More</button>');
// 绑定点击事件，直接使用当前作用域的变量
$button.click(() => {
  prefixCall(urlDomain, searchContent, offset);
});
// 创建li容器并添加按钮，再插入到目标列表
const $li = $('<li class="list-group-item d-flex my-auto mx-auto border-0" order="9999999999"></li>').append($button);
$("#prefixed-list").append($li);

这种方式不需要处理变量值的转义问题，事件处理函数直接访问当前作用域的变量，逻辑更清晰，安全性也更高。

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