如何在模板文字內獲取JQuery對象？

Question

所以通常我有一個JQuery對象，例如

var element = $('<h1>Title</h1>');

我將對其進行一些操作，稍后，我想將其嵌入模板文字中，因此它顯示為好像在使用jquery的$（）。append。 這是我的嘗試

var secondElement = $(`<div><div>${element}</div></div>`);
$('#someRandomDiv').append(secondElement);

預期結果

<div><div>[Object object]</div></div>

因為它引用的是對象，而不是元素的HTML。 但是我希望如此。

<div><div><h1>Title</h1></div</div>

有辦法嗎？ 理想情況下，它仍將使用模板文字，當然，最好是使用本機js / jquery功能而不是變通辦法。

Answer 1

您可以通過訪問element[0]來訪問基礎HTMLElement對象，然后所需的就是html字符串，可以通過.outerHTML獲得。 所以：

 var element = $('<h1>Title</h1>'); var secondElement = $(`<div><div>${element[0].outerHTML}</div></div>`); console.log(secondElement[0].outerHTML) // Logs: <div><div><h1>Title</h1></div></div> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

改用jQuery方法

 var element = $('<h1>Title</h1>'); var secondElement = $(`<div>`).append(element).wrap(`<div>`).parent(); console.log(secondElement[0].outerHTML) // Logs: <div><div><h1>Title</h1></div></div> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 3

嘗試以下代碼：

var element = $('<h1>Title</h1>');
var secondElement = $(`<div><div>${element.prop('outerHTML')}</div></div>`);
$('#someRandomDiv').append(secondElement);