Question

I found a strange thing. When I insert an element into another with the jQuery html() method, the first element is removed from DOM. I want to know if it is possible to insert an element and keep it in DOM.

Here is an example:

$(document).ready(function(){
    select1 = $("#select-1");
    select2 = $("#select-2");
    $("#gap").html(select2); //Original select2 removed from DOM
});

As you can see the #select-2 element is no longer visible if it is inserted into another element. But I want to insert it, and keep the priginal element as before.

Answer 1

Assuming I’ve understood your question correctly, you can clone the element:

$(document).ready(function(){
    var select1 = $("#select-1"),
        select2 = $("#select-2");
    $("#gap").html(select2.clone());
});

If you need to keep any event handlers that were bound to select2 you can pass true as an argument to clone.

Here’s a working example.

---

As a side note, notice that I’ve added the var keyword before your variable declarations. This prevents the variables from leaking into the global scope (which you usually don’t want).

---

As another side note, it looks like this form of the html method is not documented in the jQuery API (it lists .html( htmlString ), and states that htmlString should be a “string of HTML”).

The jQuery source however, clearly allows the use of a string, an element or a jQuery object. If htmlString is a string, the native innerHTML property is used. If not, the append method is used instead:

if ( typeof value === "string" /* ... */ ) {
    //...
}
if ( elem ) {
    this.empty().append( value ); //In your case we end up here
}