32

silly quick question:

I have my:

$('#result').load('ajax/test.html');

but what if I don't want to insert my loaded content into #result, but prepend it to #result, maintaining all precedent elements? Is it possible to create a variable, load it with content and then append or prepend it to my #result? I imagine some other scenarios where with my brand new variable I can manipulate it before inserting it into the DOM.

Daniele
  • 829
  • 1
  • 13
  • 23

5 Answers5

34

You mean something like this?

var content;
$.get('ajax/test.html', function(data){
    content= data;
    $('#result').prepend(content);
});

That saves your loaded content into a variable first and you can manipulate it however you want.

Sven Bieder
  • 5,515
  • 2
  • 21
  • 27
29

A quick way might be:

$('#result').append($('<div>').load('ajax/test.html'));
Ry-
  • 218,210
  • 55
  • 464
  • 476
  • 1
    nice! but what if I var myData = $.load.('ajax/test.html')); ? – Daniele Jan 10 '12 at 18:05
  • The nice thing about this solution is that it allows for 'Fragments': http://api.jquery.com/load#loading-page-fragments – appel Dec 21 '18 at 17:51
26
var response;
$.ajax({ type: "GET",   
     url: "ajax/test.html",   
     async: false,
     success : function(text)
     {
         response= text;
     }
});
$('#result').prepend('<div>'+response+'</div>');

You need "async: false" so you WAIT for the response. If you dont wait for it (normal Ajax asynchronous call) you will have an undefined variable for an unknown time, so it could be dangerous.

EDIT: As the comments rightly say, using "async:false" is not usual and is ugly. Normally you would manipulate the response and insert it in the DOM inside the success callback. The use of the async only would be required if you really need the response in a variable waiting for another thing to use that variable, not a common thing to happen. 

$.ajax({ type: "GET",   
     url: "ajax/test.html",   
     success : function(text)
     {
         $('#result').prepend('<div>'+text+'</div>');
     }
});
Aleja_Vigo
  • 970
  • 7
  • 12
  • nice to know, maybe ajax(get) will be better than get()? – Daniele Jan 10 '12 at 18:17
  • 1
    No, $.get is the short form of $.ajax(get). But in $.get you cant add more parameter like the "async" one. $.load is a short form also for $.ajax(get) that loads que response in the element. The same for $.post() that is a short for $.ajax(type:"POST") – Aleja_Vigo Jan 10 '12 at 18:22
  • 9
    Synchronous load is a bad idea. – Ry- Sep 13 '13 at 17:50
  • The #result line in the sample has a missing quote mark at the end, and two missing marks around #result. I would have edited but SO doesn't like edits of less than 6 characters. – Tim Mar 11 '14 at 00:26
  • 2
    Agree with @Ryan - just put the `.prepend()` statement inside the success callback function. No need to make this synchronous. – jbyrd Dec 07 '16 at 19:22
6

I think this is a shorter soluction

$.get("ajax/test.html",function (dados) { $("#result").append(dados);});
Cezar
  • 55,636
  • 19
  • 86
  • 87
Márcio SULZBACH
  • 61
  • 1
  • 1
6

Do a jQuery post and load the data to a vaiable and prepend to the desired div

$.post('ajax/test.html', function(data) {
  $('#result').prepend(data);  
});
Shyju
  • 214,206
  • 104
  • 411
  • 497