jQuery .html(), .append() doesn't work on multiline markup

I have be trying to get the .html() or .append() function to render the markup ret开发者_JS百科urned from a third party plugin via an ajax call.

The ajax response (Which is coming back fine) looks something like:

<div>
        <!-- Start Third Party Markup -->       
            <div>
                <img id="Img1" usemap="#dnc_map_43" src="charts/solution_id_6/dnc-vvvgdwwl.png?634336319915542170" style="height:294px;width:628px;border-width:0px;" />
                        <map name="dnc_map_43" id="Map1"> 
                        <area shape="poly" coords="0,274,628,274,628,294,0,294" href="http://www.dotnetcharting.com" alt="Visit .netCHARTING for licensing options and more information." title="Visit .netCHARTING for licensing options and more information." />
                        <area shape="poly" coords="381,26,616,26,616,56,381,56" href="http://www.dotnetcharting.com" alt="Visit .netCHARTING for licensing options and more information." title="Visit .netCHARTING for licensing options and more information." />
                    </map>
            </div>
        <!-- End Third Party Markup -->  
</div>

However we have no control over the way the markup from the third party is formatted and I have discovered (After tearing my hair out all morning) that the .html() or .append() jQuery functions require the markup to be in either one line or escaped using "\" after each new line character.

Does anyone know a way around this?

If that is indeed true (although I can hardly imagine it is), you can use the replace method to replace \n and \r with an empty string a space.

Dose this solve your problem ? If not, please correct me.

I've run the following test with jquery 1.5 and it works fine for me.

<div id="one">
    <P>foo</p>
    <p>bar</p>
</div>
<div id="two"></div>

$('#two').html( $('#one').html() );

The second div correctly gets populated with the multiline markup from the first one.