Getting source html, not displayable html, using jquery

Question

I added a timeline to the site. It displays and, if I click on the view source on the page, I see the same Twitter html widget 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 extracts the displayed iframe, which generates twitter 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 get the original html, not the displayed 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.

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 in your Javascript.

Answer 2

You get an iframe with $('#twitterDiv').html(); of this command because you run it after the twitter widget been displayed inside the div . Therefore, to get the original html, you will need to extract it before the twitter widget is displayed. So your code will look like this:

 <script type="text/javascript"> $(document).ready(function(){ var html = $("#twitterDiv").html(); alert(html); }) $(window).load(function(){ 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> 

Answer 3

You might want to try the DOMNodeRemoved event to read the contents when items are deleted.

 $( "#questions" ).bind("DOMNodeRemoved",function( objEvent ){ console.log(objEvent) });