remove and append works but not replace html-CodePudding

I'm creating an array of rows , and want to use later

if i append them back it works , but i want to replace html and it doesn't , curious why. In addition , if i only want to attach 50 rows back , how would i do that ?

works

var removedRows = [];

$('#statsBody tr[role="row"]').each(function (i) {
    removedRows.push($(this));
});

$.each(removedRows, function(i, v) {
    $('#statsBody').append(v);
});

doesn't work , only returns a single row

var removedRows = [];

$('#statsBody tr[role="row"]').each(function (i) {
    removedRows.push($(this));
});

$.each(removedRows, function(i, v) {
    $('#statsBody').html(v);
});

If i clear the html and then append it works fine , but why would using html vs append here not work

$('#statsBody').html('');

$.each(removedRows, function(i, v) {
    $('#statsBody').append(v);
});

CodePudding user response：

.html() always replaces the entire content.

It's the same as $(".destination").empty().append(new_element)

While .append() adds content, it doesn't replace existing content.

Every time you call .html() it clears first.

So given this code:

$(".out").html($(".source")[0]);
$(".out").html($(".source")[1]);
$(".out").html($(".source")[2]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='source'>1</div>
<div class='source'>2</div>
<div class='source'>3</div>
<hr/>
<div class='out'></div>

only the last entry $(".source")[2] will exist as the last one overwrites the previous two.

This is what is happening in your loop/$.each - each loop empties the destination from the previous loop's .html leaving just the last one.

To append only 50 you could add as basic counter:

let i = 0;
$('#statsBody').html('');

$.each(removedRows, function(i, v) {
    i  ;
    if (i<50)
        $('#statsBody').append(v);
});

or you could use a basic for loop:

for (let i=0; i<50;   i) {
    $("#statsBody").append(removedRows[i])
}

or you could count how many are there before appending (if not appending in one go) (not recommended as counting them each loop would be very inefficient).

if you don't want more than 50 (ie lose 51 ) then you can use splice()

removedRows.splice(0, 49);

using .length = on an array is similar to .splice:

var x = [1, 2, 3];
x.length = 2;
console.log(x);

if you want to keep them, but only add 50 at a time (ie add another 50 later) then you can use .slice()

var rows = $(".source");
$(".body").empty();
var page = 0;
setTimeout(() => {
  $(".body").append(rows.slice(page, 2));
  page  = 2;
}, 500);
setTimeout(() => {
  $(".body").append(rows.slice(page));
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='body'>
  <div class='source'>1</div>
  <div class='source'>2</div>
  <div class='source'>3</div>
</div>

CodePudding user response：

v is contain the object data. .html() is expecting html string.

Update Code:

var removedRows = [];

$('#statsBody tr[role="row"]').each(function (i) {
    removedRows.push($(this));
});

$.each(removedRows, function(i, v) {
    $('#statsBody').html(v.outerHTML());
});