往一个div中innerHTML内容，内容中包含<a href="javascript:;" onclick="javascript:test('param1', 'param2');">超链接，发现一个很容易疏忽出错的地方。
先上代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript">
var inner = "<a href='#' onclick='test('param1', 'param2')'>click</a>";
var content = document.getElementById("test");
content.innerHTML = inner;
function test(param1, param2){
alert(param1+param2);
}
</script>
</body>
</html>
重点在这一句：
var inner = "<a href='#' onclick='test('param1', 'param2')'>click</a>";
这样写貌似没有问题，其实执行的时候，会报错误：Uncaught SyntaxError：Unexpected token }。审查元素，发现是这样子：
注意onclick对应的方法，本来是onclick="test('param1','param2')"结果变成了onclick="test(" param1', 'param2')'，双引号和单引号冲突了。修改的方法是，onclick右边去掉成对的单引号：
var inner = "<a href='#' onclick=test('param1', 'param2')>click</a>";
但是执行的时候还是不对，再次审查元素，发现是这样：
测试了N久，最后把onclick=test('param1', 'param2')改成了onclick=test('param1','param2')，测试正常，如下：
var inner = "<a href='#' onclick=test('param1','param2')>click</a>";
初看好你会觉得压根没做过改动，其实是把test('param1', 'param2')两个参数中间那个空格去掉了，问题就出在这里，在innerHTML时，js将空格两边的内容进行了拆分，空格后面的部分被当成<a>的标签内容。