Question

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

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


function myFunction() {
  alert("hello");
}

<div id="test"> </div>

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

Answer 1

您必须使用单/双qoutes，或将其转义。

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

OR

test.innerHTML += "<button onclick=\"myFunction()\">Click me</button> ";

Answer 2

我在这里看到一些解决方案：

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>

在innerHTML中单击

2 个答案: