jQuery的多个追加仅追加最后一个

Question

I want to use jQuery to create a table. Currently I have an empty table body and I would like to use some jQuery to fill up the table:

 var $tr = $("<tr>"), $td = $("<td>"); var date = '2018-01-01' $td.text(date); $tr.append($td); $td.text("New Years"); $tr.append($td); $("#body").append($tr); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody id='body'> </tbody> <table> 

But this only appends the second td . The first one gets overwritten. Any ideas on how to fix?

Answer 1

Like Taplar said in comments, if the element already is in DOM, the .append will only "move it".

Now in your example, you append it a the same place, but also change the text.

Try the .clone() method to duplicate elements.

 var $tr = $("<tr>"); var $td = $("<td>"); var date = '2018-01-01'; $td.text(date); $tr.append($td); var secondCell = $td.clone().text("New Years"); $tr.append(secondCell); $("#body").append($tr); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody id='body'> </tbody> </table> 

Answer 2

 var $tr1 = $("<tr>"), $tr2 = $("<tr>"), $tr3 = $("<tr>"), $td = $("<td>"); var date = '2018-01-01'; $td.text(date); //various ways to accomplish it $tr1.append($td.prop('outerHTML')); $tr2.append($td.clone()); $tr3.append($('<td>', { text: date })); $td.text("New Years"); $tr1.append($td.prop('outerHTML')); $tr2.append($td.clone()); $tr3.append($('<td>', { text: 'New Years' })); $("#body").append([$tr1, $tr2, $tr3]); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody id='body'> </tbody> <table> 

Answer 3

You have to clone $td, so that DOM treats it as a new element.

 var $tr = $("<tr>"), $td = $("<td>"); var date = '2018-01-01' $td.text(date); $tr.append($td.clone()); $td.text("New Years"); $tr.append($td.clone()); $("#body").append($tr); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody id='body'> </tbody> <table> 

Answer 4

You can try next code without jquery:

let tbody =  document.querySelector('#body');
let tr =  document.createElement('tr');
let td = document.createElement('tr');
td.textContent = '2018-01-01';;
let tdClone = td.cloneNode();
tdClone.textContent = "New Years";
tr.append(td,tdClone);
tbody.append(tr);

I think that is true way, because you can create new td instead of clone created td (maybe for example this td has special classes or atributes), and you code repaint DOM only after insert tr in table.

Answer 5

Hmm... Maybe this could be an alternative to do that:

var texts = ["2018-01-01", "New Years"];

$.each(texts, function(i, val){
    $("<tr><td>"+val+"</td></tr>").appendTo("#body")
});

$.each gets each item on the array texts , wrap it on tr and td , then append to the result on #body .

working fiddle