Question

given an html element

<div id="someElement><p>This is an elements contents</p></div>

How can I inject this entire element into a document?

to clarify:

I’d like to inject the entire element “div#someElement” into another container.

<div id="someContainer"></div>
<div id="someElement"><p>Example Content</p></div>

$("#someContainer").html($("#someElement").html());

yields…

<div id="someContainer"><p>Example Content</p></div>

I’d like it to yield this…

<div id="someContainer"><div id="someElement"><p>Example Content</p></div></div>

Answer 1

You can use .appendTo(selector), like this:

$("#someElement").appendTo("#someContainer");

This will take the element and move it to be a child of #someContainer. Since you have IDs here, I’m assuming there can be only one of each, if that isn’t the case, you may need to use a slightly different usage, e.g. .appendTo(element). This is one of a few insertion methods available.