我希望我可以在innerHTML中添加一个按钮,单击该按钮即可启动功能。
var test = document.getElementById('test');
test.innerHTML += "<button onclick="
myFunction()
">Click me</button> ";
function myFunction() {
alert("hello");
}
<div id="test"> </div>
我想了解为什么这段代码不能这样工作
答案 0 :(得分:4)
您必须使用单/双qoutes,或将其转义。
test.innerHTML += "<button onclick='myFunction()'>Click me</button> ";
OR
test.innerHTML += "<button onclick=\"myFunction()\">Click me</button> ";
答案 1 :(得分:0)
我在这里看到一些解决方案:
1。。您可以在双引号中使用单引号,反之亦然
2。。仅使用单引号或双引号时,可以在字符串内转义单引号/双引号
3。。使用jquery附加
注意:女巫JQuery追加后,您只能插入HTML的另一个元素,因此不必担心引号/转义字符有误等。
var test = document.getElementById('test');
test.innerHTML += "<button onclick='myFunction()'>Click me</button>";
var test2 = document.getElementById('test2');
test2.innerHTML += "<button onclick=\"myFunction()\">Click me</button>";
$("#test3").append("<button onclick='myFunction()'>Click me</button>");
$("#test4").append($("#btn"));
function myFunction() {
alert("hello");
}
#test4 #btn {
display: block;
}
#btn{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1:
<div id="test"></div>
2:
<div id="test2"></div>
3:
<div id="test3"></div>
4:
<div id="test4"></div>
<button id="btn" onclick='myFunction()'>Click me</button>