如何在HTML字符串中引用/添加JavaScript变量？

你遇到的核心问题是引号嵌套冲突：你在onclick属性里用单引号包裹参数，可整个onclick属性值本身也是用单引号包裹的，浏览器解析时会把第一个内层单引号当成属性值的结束标记，直接截断后续代码，最终生成了异常的HTML结构。

下面给你几种可行的解决方案，按推荐程度排序：

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

把HTML结构和事件逻辑完全分离，从根源上避免引号嵌套问题，这也是现代前端开发的最佳实践：

// 创建按钮元素
const detailBtn = $('<button class="btn btn-info btn-sm" data-toggle="tooltip" title="Detail SKPD"><i class="fa fa-eye" style="color:white"></i></button>');

// 绑定点击事件，直接传入变量调用函数
detailBtn.on('click', function() {
  viewskpd(oData.id);
});

// 创建按钮组并添加到目标元素
$('<div class="btn-group"></div>').append(detailBtn).appendTo(nTd);

这种方式的优势：

• 无需处理任何引号转义，代码可读性拉满
• 就算oData.id包含特殊字符（比如引号、空格），也不会出现解析异常
• 事件逻辑和DOM结构分离，后续修改维护更方便

方法2：使用ES6模板字符串 #

模板字符串（用反引号`包裹）允许你直接在字符串中插入变量，还能自由混用单双引号，彻底告别手动拼接的麻烦：

$(nTd).html(`
  <div class="btn-group">
    <button class="btn btn-info btn-sm" onclick="viewskpd('${oData.id}')" data-toggle="tooltip" title="Detail SKPD">
      <i class="fa fa-eye" style="color:white"></i>
    </button>
  </div>
`);

模板字符串会自动处理变量插入，只要确保内层引号和外层属性的引号不冲突就行（这里onclick用双引号包裹，参数用单引号）。

方法3：手动转义引号（不推荐） #

如果你必须用传统字符串拼接方式，可以通过转义引号解决冲突，比如把onclick里的单引号转义为\'，或者混用单双引号：

// 方式A：转义双引号（适配外层单引号的HTML属性）
$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd(\""+oData.id+"\")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button></div>");

// 方式B：外层用双引号，内层用单引号
$(nTd).html('<div class="btn-group"> <button class="btn btn-info btn-sm" onclick="viewskpd(\''+oData.id+'\')" data-toggle="tooltip" title="Detail SKPD"><i class="fa fa-eye" style="color:white"></i></button></div>');

这种方式需要仔细核对引号匹配，很容易出错，所以只适合临时应急场景。

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