JQuery new Element Результирующий объект [object object] при конкатенировании

Question

Я пытаюсь создать новый тег Anchor в JQuery с некоторым атрибутом и сохранить его в переменной, но когда я объединю его с другой переменной и добавлю в Dom, он дает [OBJECT OBJECT ]

JsFiddle для Same: http://jsfiddle.net/T8q6T/

var a_name = "Sathwick Rao (sgmdev@gmail.com)^$^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); 

Answer 1

Вы не можете сцепить строку с объектом, как это. Разделяют два заявления, как это:

http://jsfiddle.net/E2Rur/

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

Answer 2

Это потому, что вы пытаетесь объединить объект со строкой. Следовательно, объект получает неявное преобразование в его строковое представление с помощью функции toString.

E.g.

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

Если вы хотите, чтобы сцепить outerHTML элемента с какой-либо другой HTML-строки, возможно, однако.

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

Однако это не обязательно самый оптимальный или чистый путь, когда это не нужно.

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

Как вы уже заметили, я add в htmlElement к набору и выполнить один append операцию, а не две цепочки append вызовов. Это делается для того, чтобы избежать многократных перерасчетов DOM, которые довольно дороги.

Если вы не хотите оберточной span и использовать тот же раствор, вы также можете сделать:

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

Answer 3

Чтобы заставить переменную htmlElement хранить строку, иногда я взломать его, как это

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