javascript - 使用 javascript 构造 HTML 并传递变量（onclick 函数） - 引号/双引号语法问题

Question

我正在构建一个带有注入 div 的 JavaScript 函数的 HTML 片段。

无法弄清楚如何动态地为传递的变量进行引号/双引号包装。

var vLC = "zh-CN"

var vHtml = "<input type='radio' id='rbtn1' onclick='renderList(" + vLC + ");' />";

此代码呈现： onclick="renderList(zh-CN);"

我需要它来渲染：onclick="renderList('zh-CN');"

那里有知道代码的天才吗？

Answer 1

不要通过将字符串混合在一起来修改您的文档。维护起来更痛苦，这是值得的。

var element = document.createElement('input');
element.type = "radio";
element.id = "rbtn1";
element.addEventListener('click', function () {
    renderList(vLC);
});

这是一般规则。如果您在另一种语言中处理一种语言（编程、模板、数据序列化等），您会遇到痛苦。当您添加另一层（此处为 JS 中的 HTML 中的 JS）时，您会感到非常痛苦。

始终要么使用 API 来构建文档，要么依次构建每一层并在通过转义例程运行后将其添加到下一层。

Answer 2

var vLC = "zh-CN"

var vHtml = "<input type=\"radio\" id=\"rbtn1\" onclick=\"renderList('" + vLC + "');\" />";

Answer 3

www.jsbin.com 来救援！- 感谢 Remy Sharp @rem :-D

解决方案是为 onclick 操作使用一个变量。

var vLanguageCode = "us-EN";
var vOnclick = 'renderList("' + vLanguageCode + '")';
vHtml = "<input type='radio' id='rbtn1' onclick=" + vOnclick + " />";

简化，简化...