如何在模板文字中获取 JQuery 对象？答案

【问题标题】：How do I get a JQuery object inside a template literal?如何在模板文字中获取 JQuery 对象？
【发布时间】：2017-11-18 13:54:30
【问题描述】：

所以我经常有一个 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 功能，而不是变通方法。

【问题讨论】：

元素不是字符串，所以它不能在模板文字中工作。最好将其附加到正确的位置，而不是执行将其转换为字符串的操作。
@Taplar 我的意思是，就像你说的，有很多方法可以做到这一点，但是，我正在寻找最原生地内置在 js/jquery 中的东西，而不仅仅是一些解决方法。
感谢您的反馈！对其进行了编辑以反映这一点。
试试我在下面给出的答案，这可能对你有用。

标签： javascript jquery string template-literals

【解决方案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>

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案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>

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

试试下面的代码：

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

【讨论】：

"你应该避免在声明元素时包装为 jQuery 对象。试试下面的代码：" 什么？