javascript - 如何在模板文字中获取 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

您可以通过访问来访问底层的 HTMLElement 对象element[0]，那么您想要的是 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);