Jquery new Element Resulting in [object object] when concatenated

Question

I am trying create a new Anchor tag in Jquery with some attribute and storing it in variable, but when i concatenate it with other variable and append to Dom it gives [OBJECT OBJECT]

JsFiddle for the Same : http://jsfiddle.net/T8q6T/

var a_name = "Sathwick Rao ([email protected])^$^4083372345";
var _name = a_name.split('(')[0];
var _part1 = a_name.split('(')[1];
var _email = _part1.split(')')[0];
var htmlElement = $('<a>('+_email+')</a>').attr('href','mailto:'+_email);
$('#shara').html(_name+' '+htmlElement);

Jason P · Accepted Answer · 2013-11-26 13:51:50Z

1

You can't concatenate a string with an object like that. Separate the two statements like this:

http://jsfiddle.net/E2Rur/

$('#shara').html(_name).append(htmlElement);

answered Nov 26, 2013 at 13:51

Jason P

27k3 gold badges34 silver badges45 bronze badges

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

1 Comment

plalx Over a year ago

It's probably better to avoid 2 DOM reflows. Chaining DOM changing operations is quite a bad habit ;) Obviously this single case will not affect performance, however when it's part of a bigger application where this sort of approach is used many times, it could be harmful.

plalx · Accepted Answer · 2013-11-26 14:14:33Z

0

It's because you are trying to concatenate an object with a string. Therefore, the object gets implicitly converted to it's string representation by it's toString function.

E.g.

var div = document.createElement('div');
'some string' + div.toString(); //"some string[object HTMLDivElement]"
'some string' + div; //"some string[object HTMLDivElement]"

If you want to concatenate the outerHTML of the element with some other HTML string that is possible however.

$('#shara').html(_name + ' ' + htmlElement.prop('outerHTML'));

However it's not necessary the most optimal or clean way when it's not necessary.

$('#shara').append($('<span>').addClass('name').text(_name).add(htmlElement));

As you may have noticed, I add the htmlElement to the set and perform a single append operation rather than chaining two append calls. That's to avoid multiple DOM reflows, which are quite expensive.

If you do not want the wrapping span and use the same solution, you can also do:

$('#shara').append($(document.createTextNode(_name + ' ')).add(htmlElement));

edited Nov 26, 2013 at 14:14

answered Nov 26, 2013 at 14:09

plalx

43.8k7 gold badges77 silver badges94 bronze badges

1 Comment

plalx Over a year ago

@SJ-B Glad I could help. The other answer might be shorter, however it's causing two DOM reflows which is not as efficient. It's a good practice to avoid them as much as possible, even if you would probably not notice much difference in this case ;)

Anudeep Bulla · Accepted Answer · 2013-11-26 14:15:47Z

0

To force the variable htmlElement to store a string, I sometimes hack it like this

 var htmlElement = $('<a>('+_email+')</a>').attr('href','mailto:'+_email)+"";
 $('#shara').html(_name+' '+htmlElement);

answered Nov 26, 2013 at 14:15

Anudeep Bulla

8,5974 gold badges24 silver badges30 bronze badges

1 Comment

plalx Over a year ago

That will produce the same undesired result. Please see my answer.

Collectives™ on Stack Overflow

Jquery new Element Resulting in [object object] when concatenated

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related