在innerHTML中单击

时间:2019-06-11 13:26:55

标签: javascript

我希望我可以在innerHTML中添加一个按钮,单击该按钮即可启动功能。

var test = document.getElementById('test');
test.innerHTML += "<button onclick="
myFunction()
">Click me</button> ";


function myFunction() {
  alert("hello");
}
<div id="test"> </div>

我想了解为什么这段代码不能这样工作

2 个答案:

答案 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>