Issue with Dynamically Loading iFrame - JQuery

Question

I have a simple JQuery, which on click of button loads an iFrame as following

<script>
    var Previewer = function (Link_ID) {
          $.ajax({
            type: "GET",
            url: "/Home/GetPreview",
            data: { ID: Link_ID },
            datatype: "json",
            success: function (result) {
                document.getElementById('previewerContent').innerHTML = "";              
                document.getElementById('previewerContent').innerHTML = result;
                console.log(result);
            },
            error: function (jqXHR) { // Http Status is not 200
                alert('ERROR  - ' + jqXHR.status);
            }
        });
    }
</script>

The Results in Console are following

<div class="iframely-embed"><div class="iframely-responsive" style="padding-bottom: 56.2873%; padding-top: 120px;"><a href="http://www.abc.net.au/news/2018-08-18/stokes-back-in-the-england-test-after-cleared-of-affray/10135642" data-iframely-url="//cdn.iframe.ly/api/iframe?url=http%3A%2F%2Fwww.abc.net.au%2Fnews%2F2018-08-18%2Fstokes-back-in-the-england-test-after-cleared-of-affray%2F10135642&amp;key=b3a9c037fa43e134a55200d51ddacfca"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

which means that my controller is returning an iFrame

But when i tried to display that using document.getElementById('previewerContent').innerHTML it doesn't show anything

Where if I use document.getElementById('previewerContent').append(result) it simpley shows the iframe code -

Any idea what am i doing wrong here?

EDIT:

• I also tried to change the datatype: "json", to datatype: "text",

• Also, the script <script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script> i tried to load this on PAGE LOAD (no success)

Answer 1

I apologize, I thought it was a Jquery issue, but digging the documentation it was a product related question. I reload the script by calling .load after adding innerHTML -