jQuery - Get HTML of appended content in IE9 (options without select wrapper)

Question

After an AJAX request I get a string with some HTML data like this:

var test = '<div id="test-options"><option value="">Select</option><option value="true@153237119">XS</option><option value="true@153237120">S</option><option value="true@153237121">M</option><option value="true@153237122">L</option><option value="true@153237123">XL</option><option value="true@153237124">XXL</option></div><div class="athoerstuff">Ather stuff here</div>';

I want to append this and after it's appended get only the content of div without the wrapper:

var li = $(test).appendTo('form');


$("body").find('#test-options').html();

-------------------------------

The problem was coming only on IE9 because the options without having the wrapper. IE9 was looking at the options inside the div and realized that this is invalid. That is why, IE9 was not getting me the options.

I added a select wrapper in the server side script where I was making the request (option values) and, instead of:

$('#test-options').html();

I added:

$('#test-options select').html();

The result result was same as previous code, but now working on IE9 as well.

Thank you all for your help.

Maybe somebody can tell me why IE9 is not getting the options without the select wrapper and other browsers do?

Answer 1

If you are trying to get the option s html then you can simply do like below,

$(test).unwrap().html();

instead of appending to body and retrieving the content.

http://jsfiddle.net/XYhbg/

The above is under the assumption with the data that you had in the test variable. Let me know if it is any different.