Jquery new Element在連接時產生[對象對象]

我正在嘗試在Jquery中創建一個具有某些屬性的新Anchor標記並將其存儲在變量中，但是當我將它與其他變量連接並追加到Dom時，會給出[OBJECT OBJECT ]Jquery new Element在連接時產生[對象對象]

的jsfiddle的一樣： 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);

來源

2013-11-26 SJ-B

不能連接用那種對象的字符串。分開的兩個語句是這樣的：

http://jsfiddle.net/E2Rur/

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

來源

2013-11-26 13:51:50

感謝它的作品:) –

這可能會更好，以避免2 DOM迴流。鏈接DOM更改操作是一個相當不好的習慣;）顯然，這種情況不會影響性能，但是當它是大量應用程序的一部分時，這種方法多次使用，這可能是有害的。 – plalx

這是因爲你試圖連接具有一個字符串的對象。因此，該對象通過它的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));

來源

2013-11-26 14:09:28 plalx

感謝您的解釋:) –

@ SJ-B很高興我能提供幫助。其他答案可能會更短，但是它會導致兩次DOM迴流，效率不高。儘可能避免它們是一種很好的做法，即使在這種情況下您可能沒有注意到太多差異;） – plalx

要強制變量htmlElement來存儲一個字符串，我有時本事這樣

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

來源

2013-11-26 14:15:47

這會產生相同的不良結果。請看我的答案。 – plalx

Jquery new Element在連接時產生[對象對象]

回答

相關問題