在设置元素的innerHTML时调用方法

Question

我在设置innerHTML时正在努力调用方法。 如果有一个我忽略的直截了当的答案，我道歉，但此刻我被困住了。

请看下面的代码：

"<a href='#' onclick='removeEntry('" + element.id + "')'><span class='fa fa-times'></span></a>"

你可以看到关于报价的混乱。 是否有第三种方式来输入引号或类似的东西，可以让我调用＆＃34; removeEntry（element.id）＆＃34;？我需要在element.id周围引用以调用removeEntry。关于如何以不同的方式解决这个问题的任何建议？

Answer 1

你应该替换

"<a href='#' onclick='removeEntry('" + element.id + "')'><span class='fa fa-times'></span></a>"

与

"<a href='#' onclick='removeEntry(\"" + element.id + "\")'><span class='fa fa-times'></span></a>"

事实上，问题在于您当前的代码，a代码onclick属性将看起来像onclick='removeEntry('myId')'

请注意，这是一个简单的简单引号，打破了你的函数调用。用转义双引号替换id简单引号，并且它会给你onclick='removeEntry("myId")'，这很好：）

修改：无论如何，如果您要定位最近的浏览器，可以尝试使用ES6 template literals，这将为您提供以下内容：

var html = `<a href="#" onclick="removeEntry('${element.id}')"><span class="fa fa-times"></span></a>`;

这有助于避免与您的报价挣扎。请注意，模板文字中的变量包含看起来像PHP。

Answer 2

'<a href="#" onclick="removeEntry(' + element.id + ')">
   <span class="fa fa-times"></span>
</a>'

这应该可行。 您可以在单引号中编码双引号，并且您希望将整个表达式作为字符串。因此，带有变量的字符串可以写为 string1 = string2 + variable + string3;

或者对于JavaScript中的多行字符串，您可以使用后退标记。

`<a href="#" onclick="removeEntry(' + element.id + ')">
       <span class="fa fa-times"></span>
 </a>`

Answer 3

此：

"<a href='#' onclick='removeEntry('" + element.id + "')'><span class='fa fa-times'></span></a>"

将创建一个这样的元素：

<a href='#' onclick='removeEntry('someId')'><span class='fa fa-times'></span></a>

哪个不对。你需要做的是：

1. 使用其他引号" （但您必须逃避它们）：
像这样：

"<a href='#' onclick='removeEntry(\"" + element.id + "\")'><span class='fa fa-times'></span></a>"

创建一个这样的元素：

<a href='#' onclick='removeEntry("someId")'><span class='fa fa-times'></span></a>

1. 或在\引号中添加反斜杠' （您还必须转义反斜杠）：
像这样：

"<a href='#' onclick='removeEntry(\\'" + element.id + "\\')'><span class='fa fa-times'></span></a>"

创建一个这样的元素：

<a href='#' onclick='removeEntry(\'someId\')'><span class='fa fa-times'></span></a>