document.writeln() is breaking my jQuery partial update. How can I resolve this?

I'm having trouble writing the HTML below to the page after an asynchronous get request. The HTML is provided by a 3rd party charting service, so I can't modify it myself, other than when I get the response after the $.get().

I asked the following question a while ago: Why is t开发者_如何学Chis HTML causing the page to go blank. The answer was:

"document.write after the page has fully rendered ... will create a new document"

As such, would it be possible for me to replace the document.writeln() function with a jQuery function which will include the HTML in thd DOM? If so, what is it I need to do?

is it a case of find and replace? Or will it even work? Is there another way to solve this issue?

<!-- Chart by Corda Enterprise Server (PopChart, Highwire) Version 7.2.3.3177 (Jun 11, 2008) .NET Embedder 7.1.0.2116 -->

<script type="text/javascript">
    var put2087644907Props;
    var put1181439927Props;
    var put433403842Props;

    function getImageMap1325059360() {
        put2087644907Props = new PopUpProperties;
        put2087644907Props.width = 400;
        // lots more of these properties being set 


        // not sure exactly, but this has something to do with providing hover-over functionality
        document.writeln('<map name="imVB_2wFC_WSdl" id="imVB_2wFC_WSdl"><area shape="poly" coords="540,52,547,52,547,59,540,59,540,52" onmouseover="return showPopUp ? showPopUp(put2087644907Props, \'VB_2wFC_WSdl\', \'Schroder All Mats Idx Lnkd Bd I Acc 2.58%\', 543, 49) : false;"/> /* big long string */ onmouseover="return hidePopUp ? hidePopUp() : false;"/></map>');
    }
</script>
<script type="text/javascript">

    document.writeln('<script type="text/javascript" src="http://ie-sv-corda72:2001/?jsPopUp"></scr'+'ipt>');

    if(document.layers) getImageMap1325059360();

</script>
<img id="VB_2wFC_WSdl" name="VB_2wFC_WSdl" width="570" height="243" style="border: 0;"
    usemap="#imVB_2wFC_WSdl" src="http://ie-sv-corda72:2001/?@_CPRVB_2wFC_WSdl" />
<script type="text/javascript">
    if (!document.layers) getImageMap1325059360();
</script>
<noscript>
    <map name="imVB_2wFC_WSdl" id="imVB_2wFC_WSdl">
        <area shape="poly" coords="540,52,547,52,547,59,540,59,540,52" alt="Schroder All Mats Idx Lnkd Bd I Acc 2.58%" />
        <area shape="poly" coords="497,41,504,41,504,48,497,48,497,41" alt="Schroder All Mats Idx Lnkd Bd I Acc 3.27%" />
        <%--lots of these area elements which gives the chart hover-text functionality--%>
    </map>
</noscript>

<!-- Corda Enterprise Server (PopChart, Highwire) Version 7.2.3.3177 (Jun 11, 2008) .NET Embedder 7.1.0.2116 by corda.com -->

For reference, this is the code that does the get:

$.get(url, {}, function (result) {

    $('#FactsheetTabs .tab_container').fadeOut(100, function () {
        $('#tabs')
            .append(result) // this fails in FireFox & chrome, but not IE... why?!
            .fadeIn(100);
    });
}, 'html');

If I edit the response to comment out the document.writeln() code like the following, it works:

$.get(url, {}, function (result) {

    $('#FactsheetTabs .tab_container').fadeOut(100, function () {
        result = result.replace("document.writeln", "//document.writeln");
        result = result.replace("document.writeln", "//document.writeln");
        $('#tabs')
            .append(result) // this works now...
            .fadeIn(100);
    });
}, 'html');

---

You can override the document.writeln() function with one of your own that will safely append the html to the DOM without breaking it. For example:

document.writeln = function (html) {
    $(document.body).append(html);
}

The other option is close to your replace method but, instead of adding comment delimiters, replace document.write with your own method:

result = result.replace(/document\.writeln/g, "$(document.body).append");