javascript - 用javascript构建html标签

Question

场景如下：我多次调用 buldMyStuff 函数以如下方式构建图像。将 img 包装成“a”标签不是一种选择。

function buildMyStuff(item){
    var tag = <img src="someimg.png" onclick="doClick(' + item.Type + ',' + item.data+ ')" />';
    return tag;
}

function doClick(type,data){
    //do stuff
}

让我们假设 item.type 的值为“type”，item.data 的值为“data”。问题是当我单击图像时，它说类型未定义。因此（我检查了构建的 html 结构）img 最终看起来像这样：

<img src="someimg.png" onclick="doClick(type,data)" />

我需要实现的是：

 <img src="someimg.png" onclick="doClick('type','data')" />

但是，当我使用 ' 字符来包装整个标签和 " 字符来包装属性时，我不能使用其他任何东西。有人知道解决方案吗？

先感谢您。

Answer 1

这是无效的；

var tag = <img src="someimg.png" onclick="doClick(' + item.Type + ',' + item.data+ ')" />';

它应该是

var tag = '<img src="someimg.png" onclick="doClick(\'' + item.Type + '\',\'' + item.data+ '\')" />';

Answer 2

function buildMyStuff(item){ 
    var tag = '<img src="someimg.png" onclick="doClick(\'' + item.Type + '\',\'' + item.data+ '\')" />'; 
    return tag; 
} 

Answer 3

您可以使用'\'转义特殊字符。

var tag = <img src="someimg.png" onclick="doClick(' + item.Type + ',' + item.data+ ')" />';

=>

var tag = '<img src="someimg.png" onclick="doClick(\'' + item.Type + '\',\'' + item.data+ '\')" />';