Selecting Elements Returned From Jquery Ajax Response Strings

selectElementsFromAjaxResponse.js

$(function () {
    $.get('contentUrl', function (response) {
        var source = $('<div>' + response + '</div>');
        $('#target').empty().append(
            $('<div/>')
            .append(response)
            .find('#selectorInResult');
        );
    });
});

This avoids parsing HTML twice (once via $(result) and then when inserting it back via .html()):

$('#target')
    .empty()
    .append(
        $('<div/>')
            .append(response)
            .find('<selector>')
    );

Also, if you receive bad HTML and try to wrap it in div by concatenation you could end up with fragment with more than one element at the top level. Your find will then miss all topmost siblings. Previous approach ensures the single root div to search from.

If you are sure your match is at top level this will suffice (no need for wrapping the div around the result):
$(response).filter('<selector>')

Good stuff - thanks for the improvements!

Hi, selecting elements returned from Vanilla JS Ajax response strings ?