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

Question

So often I have a JQuery object such as

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

I will make some operations on it, and later, I want to embed it inside of a template literal, so it displays as if it were using the $().append from jquery. Here is my attempt

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

This, as expected, outputs

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

as it is referencing an object, not actually the HTML of the element. However I want it to be .

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

Is there a way of doing this? Optimally it would still use the template literals, and of course, it is best if it uses native js/jquery functionality, rather than workarounds.

Answer 1

You can access the underlying HTMLElement object by accessing element[0] , then what you want is the html string, which you can get with .outerHTML . So:

 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

Use jQuery methods instead

 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

Try following code:

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