CODEWITHSUNDEEP
jquery
NaN
NaN

Reputation: 1306

How to append data to an element

I have a scroller that I want to append a single tr of data to. I'm not sure how to do this and was hoping that someone could point me in the right direction. I am currently using load but it is wiping out the rows that were already existing and replacing them with the row that I want to append.

Here is my code so far

var refresh = setInterval(function() {
  $("#scroll tbody").load("scroller.asp");
},10000);

I found a snippet that I think will work for my case but I'm not sure how to get the loaded data into it. Do I need ajax or is it possible to output the return value of load into a variable?

  $('<html here>')
      .hide().prependTo('#container').slideDown("slow").css('color','red');

Upvotes: 0

Views: 60

Answers (3)

The Alpha
The Alpha

Reputation: 146191

Actually following function is directly loading HTML data in the table with id scroll

$("#scroll tbody").load("scroller.asp");

So, everything retrieved from server is getting inserted (replacing old HTLM) table with id #scroll and this is also ajax but to manually append the response by modifying it before inserting you may use a different function like:

$.get("scroller.asp", function(response){
    $("#scroll tbody").append(response);
});

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can't append content using the jQuery.load() method.use ajax or jquery .get,

$.ajax({
  url: "scroller.asp",
  success: function (data) { $("#scroll tbody").append(data); },
  dataType: 'html'
 });

Upvotes: 1

John Kentucky
John Kentucky

Reputation: 886

load function replaces the contents. To have the content appended, you can do an ajax GET request, then append that data into "#scroll tbody". Something like this:

$.get('scroller.asp', function(data){ 
  $("#scroll tbody").append(data);
});

Otherwise, create a temporary HTML element, load scroller.asp data into it, and then append that element content into "#scroll tbody"

Upvotes: 0

Related Questions