当我用javascript开发我的html时,我有一个问题.

我最终想要的是HTML：

<div id="test">
<div onclick="alert("it's a test.")">Show</div>
</div>

但在代码中我希望它像这样实现：

<div id="test"></div>
<script>
var tmp="it's a test.";//be careful, there must be a single quote in this variable
$('#test').append("<div onclick='alert(\" "+tmp+" \")'>Show</div>");
</script>

在萤火虫中它显示：

<div id="test">
<div ")'="" test.="" a="" s="" onclick="alert(" it">Show</div>
</div>

所以我认为这是一个逃避问题.但我认为它至少有3个级别的深度.
有人可以帮帮我吗？谢谢！

解决方法:

不要使用jQuery来编写内联脚本.更换

$('#test').append("<div onclick='alert(\" "+tmp+" \")'>Show</div>");

同

$('<div>').click(function(){ alert(" "+tmp+" ") }).text('Show').appendTo('#test');

这条路

>您不会在点击时评估代码
>直接检测到语法错误
>你不会有引用逃避问题
>代码更具可读性
>你将有一个直接绑定,没有无用的选择器分辨率
>当你需要一个变量(例如temp)时,你不需要把它放在全局范围内,它可以在元素添加的范围内

要在评论中回答您的问题,您也可以

>使用中间闭包来封闭循环时的值(example here)
>或使用jQuery’s click function的eventData参数.

使用jQuery的eventData参数的示例：

var names = ['A', 'B'];
for (var i=0; i<names.length; i++) {
  $('<div>').text('link '+(i+1)).click(names[i], function(e) {
    alert('Name : ' + e.data);
  }).appendTo(document.body);
}

Demonstration