CODEWITHSUNDEEP
javascriptjquery
blue-sky
blue-sky

Reputation: 53806

Why is .html() method returning extra code than what is in div

In this fiddle : http://jsfiddle.net/m7q3H/52/

I'm accessing the html returned within the div "toupdate". I expect it would return just <script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6343621.js"></script> Instead it is returning :

 <script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6343621.js"></script><a name="pd_a_6343621" style="display: inline; padding: 0px; margin: 0px;"></a><div class="PDS_Poll" id="PDI_container6343621"><div style="margin-bottom: 0px; margin-top: 0px;" name="PDI_form6343621" id="PDI_form6343621"><div class="pds-box"><div class="pds-box-outer"><div class="pds-box-inner"><div class="pds-box-top"><div class="pds-question"><div class="pds-question-outer"><div class="pds-question-inner"><div class="pds-question-top"> New Poll</div></div></div></div><div class="pds-answer"><span id="pds-answer6343621"><span class="pds-answer-group"><span class="pds-answer-input"><input class="pds-radiobutton" type="radio" id="PDI_answer28688772" value="28688772" name="PDI_answer6343621"></span><label for="PDI_answer28688772" class="pds-input-label"><span class="pds-answer-span">Answer A</span></label><span class="pds-clear"></span><br></span><span class="pds-answer-group"><span class="pds-answer-input"><input class="pds-radiobutton" type="radio" id="PDI_answer28688773" value="28688773" name="PDI_answer6343621"></span><label for="PDI_answer28688773" class="pds-input-label"><span class="pds-answer-span">Answer B</span></label><span class="pds-clear"></span><br></span><span class="pds-answer-group"><span class="pds-answer-input"><input class="pds-radiobutton" type="radio" id="PDI_answer28688774" value="28688774" name="PDI_answer6343621"></span><label for="PDI_answer28688774" class="pds-input-label"><span class="pds-answer-span">Answer C</span></label><span class="pds-clear"></span><br></span></span></div><div class="pds-vote"><div class="pds-votebutton-outer"><a id="pd-vote-button6343621" class="pds-vote-button"><span>Vote</span></a><span class="pds-links"><a href="javascript:PD_vote6343621(1);" class="pds-view-results">View Results</a><br><a href="http://polldaddy.com/signup-free/?ad=poll-front" target="_blank" class="pds-pd-link">Polldaddy.com</a><span class="pds-clear"></span></span><span class="pds-clear"></span></div></div></div></div></div></div></div><img src="http://pixel.quantserve.com/pixel?a.1=p-18-mFEk4J448M&amp;a.2=p-ab3gTb8xb3dLg&amp;labels.1=type.polldaddy.poll" style="display: none;" border="0" height="1" width="1" alt="Quantcast"></div><div id="PD_superContainer"></div>

Where is this code coming from? Can I access all of this javascript code via a seperate jquery method instead of .html() ?

Fiddle code : 

<body>
    <div id="toupdate">
    <script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6343621.js"></script>
    </div>

    </body>​

$(document).ready(function() {
    console.log('HTML is '+$('#toupdate').html());
});​

Upvotes: 0

Views: 205

Answers (3)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Looks like the script is generating some stuff inside touupdate

enter image description here

Upvotes: 0

Pointy
Pointy

Reputation: 413712

The script has some document.write() calls, which are evaluated to add content to the page.

When the browser sees that <script> tag, it loads the script and executes the code immediately. The content written to the page by the script code, therefore, ends up inside that <div> element because the closing tag has not yet been seen (by the browser).

Upvotes: 2

Quentin
Quentin

Reputation: 943214

It is output by the JS at http://static.polldaddy.com/p/6343621.js

.html() maps onto .innerHTML which serialises the live DOM to HTML, it doesn't get the original source.

If you want the original source you need to make a new HTTP request to the URI of the document and then process it as text.

Upvotes: 4

Related Questions