Viewing HTML of external pages

Question

What I have so far is this:

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            alert($("p").html());
        });
    });
    </script>
</head>
<body>
    <button>Return the content of the p element</button>
            <p>Test Text</p>
</body>
</html>

What this does is display the content of my page. But say I have another html file that looks like this:

<html>
<head>
</head>
<body>
    <p>This is text</p>
</body>
</html>

How would I go about viewing that page's html?

possible duplicate of [How to get html source code from external url](http://stackoverflow.com/questions/5289027/how-to-get-html-source-code-from-external-url) — Anderson Green, Aug 13 '13 at 02:08

score 0 · Answer 1 · answered Aug 13 '13 at 01:52

0

You can give the <p> element an ID:

<p id="myP"></p>
<script>
$(document).ready(function() {
  $("button").click(function(){
      alert($("#myP").html());
    });
});
</script>

answered Aug 13 '13 at 01:52

Ryan

14,392
8
62
102

Say my file name is 'test.html' What would I put here `
`? – DavisDude Aug 13 '13 at 01:58
@DavisDude you can put whatever you'd like there as long as you have control over the HTML. – Ryan Aug 13 '13 at 01:59
What if I didn't? How would you do that? – DavisDude Aug 13 '13 at 02:01

score 0 · Accepted Answer · answered Aug 13 '13 at 02:03

If the alert part is just for testing and what you're trying to do is grab an element from Page 2 and display its contents on Page 1, you can use $.load().

If on Page 1 you had:

<p id="page1paragraph"></p>
<script>
    $(document).ready(function() {
        $('#page1paragraph').load('page2url.htm #page2paragraph');
    });
</script>

Then Page 2 contained:

<p id="page2paragraph">Text</p>

It would make an ajax call to get the page contents, and if you specify an element after the URL, it will get only that element's content. This code would place the contents of the paragraph tag on Page 2 into Page 1's paragraph tag.

There are plenty of examples in the jQuery docs: http://api.jquery.com/load/

Viewing HTML of external pages

2 Answers2