Javascript 记录时与附加到元素时返回不同值的HTML字符串

我试图动态生成包含HTML的字符串，然后将它们附加到文档中。当我

console.log

字符串时，该值正好显示了我所期望的结果。但是，当我将其附加到HTML文档中时，它会以某种方式发生变化

for (var i=0; i < roster.length; i++) {
            if (roster[i].attended === 1) {
                var attendedSVG = 'user-check.svg';
            }
            else {
                var attendedSVG = 'user-x.svg';
            }
            var _fkUserID = roster[i]._fkUserID;
            var firstName = roster[i].firstName;
            var lastName = roster[i].lastName;
            var cancelJSFunction = "cancelRequest('"+_fkUserID+"', '"+firstName+"', '"+lastName+"', '"+day+"', '"+time+"');";

            console.log(cancelJSFunction);

/* Returns: "cancelRequest('userID', 'firstName', 'lastName', 'day', 'time')" */

            var html = "<div class='user'><img class='cx' src='x-square.svg' onClick='"+cancelJSFunction+"'></img>"+firstName+' '+lastName+"<img class='attended' src='"+attendedSVG+"'></img></div>";
            $("#roster-container").append(html);

/* Appends:
<img class="cx" src="x-square.svg" onclick="cancelRequest(" userID',="" 'firstName',="" 'lastName',="" 'day',="" 'time')'="">
 */

}

for（变量i=0；i

---

为什么记录的内容和附加的内容是两个完全不同的字符串，其中添加了所有的=”“？

呈现的HTML如下所示

<div class='user'>
    <img class='cx' src='x-square.svg' onClick='cancelRequest('userID', 'firstName', 'lastName', 'day', 'time')'></img> 
    Jane Doe 
    <img class='attended' src='xxxx'></img>
</div>

How'console.log（cancelJSFunction）；'将adminCancelRequest（'userID'，'firstName'，'lastName'，'day'，'time'）分配给“cancelRequest（'…”时返回“adminCancelRequest（'userID'，'firstName'，'lastName'，'day'，'time'）”？不确定这是否相关，但您在HTML和javascript函数中使用了单引号，这将导致问题。您不应该添加这样的事件处理程序。您使用的是jQuery。让它帮助您。与其硬编码onclick，不如给元素一些数据属性或其他内容，然后绑定单击event@zhulien我做了一个蛋糕ome命名更改使代码更易于阅读，但忘了更改。在帖子中修复了它。@Marie这似乎是此方法的一个很好的替代方法，我将改为这样做。我使用双引号开始和结束字符串，并使用单引号在其中添加字符串，这在过去通常对我有效。我发现这很奇怪所有这些都将被添加。