使用javascript DOM生成HTML

Question

我想用javascript生成这样的img标签：

<img id="drag0" src="http://localhost:34737/Images/MainSlider/A(1).jpg" class="col-4" draggable="true" ondragstart="drag(event)">

拖动方法：

document.addEventListener("drag", function (ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}, false);

当我生成动态html时，它无法按预期运行，并在DOM中返回：

 <img id="drag1" src="http://localhost:34737/Images/MainSlider/B(1).jpg" class="col-4" draggable="true" ondragstart="function drag(ev) {
    ev.dataTransfer.setData(&quot;text&quot;, ev.target.id);}">

这是我的JavaScript代码：

 var img = document.createElement("img");
 img.setAttribute("id", "drag" + i);
 img.setAttribute("src", user[i].MainPicAddress);
 img.setAttribute("class", "col-" + e);
 img.setAttribute("draggable", true);
 img.setAttribute("ondragstart", drag); 

Answer 1

您需要将ondragstart属性值放在这样的引号中：

img.setAttribute("ondragstart", "drag(event)"); 

Answer 2

尝试在setAttribute 2nd参数周围添加双引号。

img.setAttribute("ondragstart", 'drag(event)'); 

或类似的东西

img.setAttribute("ondragstart", 'drag');