Cannot change response element

Question

I can excess a td element from AJAX response but can't change it.

$('#addjob').click(function(){
    $.ajax({
        type:"POST",
        url: 'invoicelist.php',
        success: function(response){
            $('#forajax').append(response);
            $(response).find('.heading').html();
        }
    });
});

this code works well and selects the text from the <td class='heading'>123</td> but if I want to change this 123 result I write $(response).find('.heading').html('456'); but it doesnt really change anything. any suggestions?

Answer 1

You're writing the raw HTML into your #forajax container, then creating a new jQuery object with the contents of response. Any changes to the new object will be discarded; they have nothing to do with the HTML you wrote.

Get the object first, modify it, then append:

// create a jQuery object wrapping the returned HTML
var r = $(response);

// update the contents of our new object
r.find('.heading').html('456');

// add the new, updated object to our container
r.appendTo('#forajax');