Retrieving the original html, rather than the rendered html, with jquery

Question

I've added a twitter timeline to a website. It renders and if I click view source on the page, I can see the same twitter widget html that I added to the site:

<div id='twitterDiv'>
    <a class="twitter-timeline"
      href="https://twitter.com/twitterName"
      data-widget-id="123456789012344567">
    Tweets by @goodName
    </a>
    <script type="text/javascript">
    window.twttr = (function (d, s, id) {
      var t, js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id; js.src=     "https://platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);
      return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
    }(document, "script", "twitter-wjs"));
    </script>
</div>

But when I grab the html from the div containing it using jquery, $('#twitterDiv').html(); it retrieves the rendered iframe that twitter generates instead of the original html:

<p data-twttr-id="twttr-sandbox-0"><iframe style="border: none; max-width: 100%; min-width: 180px; width: 238px;" height="600" scrolling="no" frameborder="0"></iframe></p>
<p>
<script type="text/javascript">
window.twttr = (function (d, s, id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id; js.src= "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>

How to retrieve the original html, not the rendered iframe?

Answer 1

When the Twitter script loads, it replaces the original HTML with an iframe. JQuery only has access to the new HTML, not the original one.

What you can do is save the original HTML in a variable before the Twitter script loads.

<a class="twitter-timeline" id=twitter-timeline1 ...>
Tweets by @goodName
</a>
<script type="text/javascript">
var original_twitter_html=document.getElementById('twitter-timeline1').innerHTML

window.twttr = ...
</script>

You can use this variable later on in your Javascript.