jQuery Appending an Object multiple times

Question

I am not sure what exactly is happening here, I think the fact that the variable is a jquery object.

This only appends once, my question is why?

var newInput = $('<input/>');
$('#newDiv').append(newInput);
$('#newDiv').append(newInput);

Though this works as I would assume

var newInput = '<input>';
$('#newDiv').append(newInput);
$('#newDiv').append(newInput);

Thank you for your help!

score 24 · Answer 1 · answered Sep 19 '14 at 17:44

In the first case, $ will parse your html and create a new jQuery object which will wrap over an HTMLInputElement.

Basically, it's like doing:

var $newDiv = $('#newDiv'),
    newInput = document.createElement('input');

$newDiv.append(newInput);
$newDiv.append(newInput);

In the second case, it's parsing the html every time, generating a different jQuery object for every instance.

Here's how the first sample could be fixed:

var newInput = $('<input/>');
$('#newDiv').append(newInput);
$('#newDiv').append(newInput.clone());

upvoted. official documentation link is also required. – devprashant Sep 15 '16 at 09:28 — devprashant, Sep 15 '16 at 09:28

score 21 · Accepted Answer · edited Oct 09 '18 at 19:02

21

When you do $('<input/>'), jQuery creates an input DOM element for you.

When you .append() a DOM element, it detaches the element from its previous position. (See Fiddle). From the docs:

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned).

Thus, your second .append() call will remove it from where it was appended first and place it in the new position.

When you append a string, the DOM element is created as it is appended.

edited Oct 09 '18 at 19:02

Cem Schemel

442
3
13

answered Sep 19 '14 at 17:42

Stryner

7,288
3
18
18

1

Oh my, I had no idea that is how it worked. Thank you for setting me straight. – VIDesignz Sep 19 '14 at 17:45
"When you append a string, the DOM element is created after it is appended." This statement makes no sense... – plalx Sep 19 '14 at 17:48
@plalx Ah, sorry. Thanks for pointing that out, I tried to fix it. – Stryner Sep 19 '14 at 17:50
upvoted. official documentation link is also required. – devprashant Sep 15 '16 at 09:28

score 1 · Answer 3 · answered Sep 19 '14 at 17:43

1

It is because in the first case it is referring to the same element object (appends same element so it's appended to new place), and in second case you are appending html as string so it appends multiple elements (new element every time).

answered Sep 19 '14 at 17:43

Ehsan Sajjad

61,834
16
105
160

score 1 · Answer 4 · answered Apr 21 '19 at 16:43

You can append multiple elements by creating new element each time with loop:

(function(){
  for(var i=0; i<10; i++){
    var newInput = $('<input>');
    $('#newDiv').append(newInput);
}})();

input {border:1px solid red; margin:3px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newDiv"></div>

score 1 · Answer 5 · answered Sep 19 '20 at 21:35

The append method actually moves the element so, if you check this code in debugger with different div tags you will see the element will be created once and then moved to next div in your case it is being moved to same div. To solve this you can use the clone method in to create a new clone of the element every time you append it.

example HTML :

<div id="hello">
  
</div>

JS :

function addToDiv(div,data){
  $('#'+div).append(data)
}

$(document).ready(function() {
  
  let temp = $('<p>').html('hello')
  addToDiv('hello',temp.clone());
  addToDiv('hello',temp.clone());

});

jQuery Appending an Object multiple times

5 Answers5

Linked