Problem using jquery load

JavaScript
1

I’m a novice at JavaScript and a spanking new infant at jQuery so my question hopefully will be simple to solve.
I have a HTML page with a div with id of #display. I use load to to load an div off a second page into the #display div and that works fine. I then try to load another div also from the second page below that. What I get is just the second div. I was thinking that they both loaded into the same place do I tried to insert a <br /> after the first div but that made no difference.
Here’s the code:

$('#display').load('theQuest.html #coconuts', function() {
        this.innerHTML+="<br />";                                                 
        });
     
       $('#display').load('theQuest.html #yourDead');
2

The load function will replace the content of the div you have targeted. You could try popping it in another container:


$('<div></div>).appendTo('#display').load('theQuest.html #coconuts');
$('<div></div>).appendTo('#display').load('theQuest.html #yourDead');

You also don’t need to use .innerHTML when you have jQuery available, you can use the .html() method.

Your example loads 2 different divs on the same page so you could easily replace that code that does a single call to url:


$.get('theQuest.html', function(data) {
    var $display = jQuery('#display');
    jQuery(data).find('#coconuts).appendTo($display).end()
            .find('#yourDead').appendTo($display);
});
3

thanks for the reply. I tried it but didn’t work but it’s ok I got a reply on another forum that did work:

$.get('theQuest.html', function(data) {
      $('#display').html($('#coconuts', data)).append($('#yourDead', data));
});