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获得该字符串。所以：

＆＃13;

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>

＆＃13;

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

＆＃13;

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);

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

3 个答案: