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+ '\')" />';