CODEWITHSUNDEEP
javascriptjquery
GLPease
GLPease

Reputation: 591

JQuery append method multiple parent elements append same element

As the API document declared:

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). Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

var div = $("<div></div>").addClass("divCells"),
    tdName = $("<td></td>").addClass("tdName"),
    tdAge = $("<td></td>").addClass("tdAge"),
    tdGender = $("<td></td>").addClass("tdGender"),
    tds = [tdName, tdAge, tdGender],
    tr = $("<tr></tr>"),
    tbody = $("#peopleList tbody");
    tds.append(div);
    tr.append(tdName).append(tdAge).append(tdTimetdGenderstamp);
    tbody.append(tr);

As above code represents, I try to include the 3 tds in to an Array, so that I could append div into all of them, but it is not working.

Upvotes: 1

Views: 763

Answers (1)

Bumpy
Bumpy

Reputation: 1332

You're trying to use jQuery .append on a vanilla JavaScript Array. .append only works on jQuery/DOM elements, not JavaScript types such as Arrays.

Your tds array contains jQuery/DOM elements, but the Array itself isn't 'appendable' in the manner you're attempting.

Using an Array, you'll have to iterate through your array, and manually append the div to each element in it. Furthermore, since you will be appending to 3 separate elements individually (i.e. 1 per iteration, not all 3 at the same time) you'll have to manually .clone the div yourself, otherwise you'll just be appending the one div to the 1st item in the Array, and then moving the same div to the 2nd, and again to the 3rd. So...

// tds.append(div); // Change this to...
for (var i=0; i< tds.length; i++) {
   tds[i].append(div.clone())
}

OR...

You could forget about using the Array altogether, and have jQuery clone and append the div for you (as your original question implied). Here's how...

// Remove the following lines...
// tds = [tdName, tdAge, tdGender],
// tds.append(div);

// Then, after you add the td's to your row here...
tr.append(tdName).append(tdAge).append(tdGender);

// ...have jQuery find all the td's and clone+append your div to them in one hit:
tr.find('td').append(div)

Upvotes: 1

Related Questions