Jquery new Element在连接时导致[object object]

Question

我正在尝试在Jquery中使用一些属性创建一个新的Anchor标记并将其存储在变量中，但是当我将其与其他变量连接并附加到Dom时它会给出[OBJECT OBJECT]

相同的JsFiddle： 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);