Generate Html with javascript DOM

Question

I want to generate an img tag like this with javascript:

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

and drag method:

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

When I generate the dynamic html it's not working as expected and it returns this in the 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);}">

This is my javascript code:

 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);

Don't attach events by on* attributes, use addEventListener method instead. — Teemu
– Teemu, Commented Feb 19, 2018 at 8:29

Zenoo · Accepted Answer · 2018-02-19 08:16:57Z

1

You need to put your ondragstart attribute value in quotes like this :

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

answered Feb 19, 2018 at 8:16

Zenoo

12.9k4 gold badges48 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zetawars · Accepted Answer · 2018-02-19 08:18:50Z

0

try adding double quotes around the setAttribute 2nd parameter.

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

or something like

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

answered Feb 19, 2018 at 8:18

zetawars

1,0811 gold badge12 silver badges29 bronze badges

Collectives™ on Stack Overflow

Generate Html with javascript DOM

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related