Building html tag with javascript

Question

The scenario is the following: I call the buldMyStuff function to build images many times the following way. Wrapping the img into an "a" tag is not an option.

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

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

Lets assume that the item.type value is "type" and the item.data value is "data". The problem with this that when I click the image it says type is not defined. Therefore (and I checked in the built html structure) the img eventually looks like this:

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

What I need to achieve is:

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

However as I am using the ' character to wrap the whole tag and the " character to wrap the attribute I cannot use anything else. Does someone know the solution for this?

Thank you in advance.

Marcus · Accepted Answer · 2012-09-19 11:14:22Z

1

You can use '\' to escape special characters.

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

=>

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

answered Sep 19, 2012 at 11:14

Marcus

6,8694 gold badges22 silver badges29 bronze badges

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

1 Comment

Gabor Peto Over a year ago

Thanks Markus. I figured out after Matei Mihai's answer. He's solution was not correct, but yours is. Thanks guys.

DannyTheDev · Accepted Answer · 2012-09-19 11:12:26Z

1

this is invalid;

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

It should be

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

answered Sep 19, 2012 at 11:12

DannyTheDev

4,1732 gold badges24 silver badges36 bronze badges

2 Comments

Gabor Peto Over a year ago

But in that case the img will be: <img src="someimg.png" onclick="doClick("type","data")" />. That does not seem to be valid for me.

DannyTheDev Over a year ago

It looks like it, but in reality its "doClick('type','data')" the quotes are single but with a \ infront, this escapes the ' making it "doClick('type','data')"

Mihai Matei · Accepted Answer · 2012-09-19 11:29:50Z

1

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

edited Sep 19, 2012 at 11:29

answered Sep 19, 2012 at 11:13

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

Collectives™ on Stack Overflow

Building html tag with javascript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related