Question

I’m trying to load content from another page div into another page div.

What i’ve got:

JQUERY:

$('#news_date-1').load('test.php .news_date-1');

TEST.PHP

<div class="news_date-1">20-11-2009</div>

Destination.html

 <div id="news_date-1"></div>

The result i get =

<div id="news_date-1"><div class="news_date-1">20-11-2009</div></div>

The result i want =

<div id="news_date-1">20-11-2009</div>

Can anybody help out?

Answer 1

You can try calling unwrap() on it in the callback.

$('#news_date-1').load('test.php .news_date-1', function () {
    $(this) //will refer to #news_date-1
        .find('.news_date-1') //find the inserted div inside
        .contents() //find all its contents
        .unwrap(); //unwrap the contents, thus removing the unneeded div
});

This is not the most beautiful solution, because .load() already inserts it into the DOM, and then you tamper with the DOM again, which should be minimized.

Another way I see is using $.get() instead:

$.get('test.php', function(receivedHtml) {
    //getting only the parts we need
    var neededHtml = $(receivedHtml).find('.news_date-1').html();
    //adding it to DOM
    $('#news_date-1').append(neededHtml);
});