2

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.

3
  • 1
    Are you asking why "#select-2" is is removed from it's position in the DOM and moved into "#gap", instead of a COPY of "#select-2" being moved?
    – El Guapo
    Jul 2, 2012 at 12:52
  • @Cranio and TheC0d3r - The OP is expecting to see three select elements. You should only be able to see 2. Jul 2, 2012 at 13:09
  • This is basically a duplicate of How to append one jQuery element already in the DOM to another element?, but it is a strange special case; strange because the behavior of .html(jQueryObject) doesn’t appear to be documented, so it’s questionable whether this even should work the way it does. It is, at least, mentioned in issue #1109. Nov 20, 2022 at 5:58

5 Answers 5

4

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
}
4
  • Add parameter true to clone() so it clones event handlers too
    – Seimen
    Jul 2, 2012 at 12:53
  • Oh sorry, either it wasn't there when I commented or I skipped that
    – Seimen
    Jul 2, 2012 at 12:58
  • Thanx, also another good method is "select2.clone().appendTo("#gap");"
    – jumancy
    Jul 3, 2012 at 5:19
  • @jumancy - You're welcome :) The difference with that example is that it will append the element, rather than replacing the contents with that element. Jul 3, 2012 at 7:35
0

change your code to this

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

Try

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

With

var select2 = $("#select-2");

you are directly referring to the DOM-Element, not just it's content! That's why you move the element instead of cloning it.

To do the latter either write:

$("#gap").html(select2.clone());

or

$("#gap").html(select2.html());

or

var select2 = $("#select-2").html();
$("#gap").html(select2);
1
  • html() is not correct, because it takes html code inside the element, not whole element
    – jumancy
    Jul 3, 2012 at 4:45
0

Actually, there are several commands to do this. I usually use: insertAfter(), insertBefore(), before(), after(), append(), appendTo(), prepend(), prependTo().

Common way of using it: html

<div id="somediv">
    some content
</div>

JS

$(document).ready(function(){
  $("<span/>").html("this is what I'm appending").appendTo("#somediv");
});

Here I appended a span inline-block element to the existing div block. The other functions are similar, feel free to read the documentation.

If you want to keep the original, just use clone before like this:

$(document).ready(function(){
  var theclone = $("#select-2").clone();
  theclone.appendTo("#gap");
});

Of course there are several ways to do this, but I think this gets the job done. Here's your modified example: http://jsfiddle.net/9PAYd/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.