jQuery wrap tr and div from ajax response -

the ajax response contains html , has 2 elements tr , div. need append tr table , need move div other place. apparently wrapping tr , div giving me tr (maybe because not valid html). how can split them have tr in 1 variable , div in other (i can use regex replace split tr , div first , wrap them separately, regex dangerous , not 100% accurate specially on html tags). consider this:

var ajax_response = "<tr><td>hello</td></tr><div>move me</div>"; var $container = $(ajax_response).wrap("<div />").parent(); alert($container.html()); // has tr not div 

that invalid html structure. browser move div outside table. since tr being appended div not visible.

the option move div inside td

var ajax_response  = $('<output/>').append('<tr><td>hello<div>move me</div></td></tr>'); var div = ajax_response.find('div').remove(); var tr = ajax_response.find('tr'); 

---

update

you can use .parsexml()

var response = '<table>'; var response += ajax_response + '</table>'; var output = $.parsexml(response); var div = $(output).find('div'); var tr = $(output).find('tr'); 

this works because parsexml creates valid xml document. in order create valid xml pushes div outside table why <table></table> needs wrapped around response. using jquery convert xml document jquery object , use find required elements.

i hope makes sense

here demo http://jsbin.com/jayude/edit?js,output