Question

I have two <div> elements, and the following JavaScript code:

var myObject = {
    $input: $('<input />'),
    insert: function () {
        $('div').append(this.$input);
        $('div').append(' ');
    }
};

myObject.insert();

This, as I expect, produces an <input> element within each of the two <div> elements.

Now when I create a new instance of myObject and call insert() again I will be expecting 4 <input> elements, two in each <div>. Weirdly, I only get 3 <input> elements!

See example code here:
http://jsfiddle.net/FNEax/

Answer 1

You’re creating 1 input explicitly:

$input: $('<input />',{value:i}),

…but cloning it implicitly when you try to append it to multiple divs

// 2 divs
$('div').append(this.$input);

Then Object.create doesn’t create a new $input, so on the second pass, it appends (moves) the input from the second div (which is actually the original) to the first div, and then does the implicit clone to populate the second.

Here’s a jsFiddle example that increments an i variable whenever insert() is called, and adds it as the value of the input. Notice that it is always set at 0.

I also modified it to pass a string to insert so you can see which call each input came from.

The two inputs from the second call both still have the string passed to the first call.

---

EDIT:

I flipped it around mid explanation, but the concept is the same.

When the second insert() is called, the clone is first created of the original and added to the first div, then the original is appended to the second div (where it already is).

jQuery makes the clones first, then appends the original last.

Here’s another jsFiddle example that adds a custom property to the original, then adds some text next to the element with that custom property after each insert(). The text is always added next to that original in the second div.