Grab Html Tags from HTML Variable using get() jquery

Question

First: I am new to javascript so please forgive me if my syntax is novice.

I have been trying to get data in HTML tags using get() in jquery. But no matter how many different variations I try, it just won't work. Can someone please show me what I am doing wrong?

Below is the javascript I am using.

$.get('load.html', function(raw){
    var bodyHtml = $(raw).filter('body').html();
    var divHtml = $(raw).filter('div').html();
    var title = $(raw).filter('title').text();
    var tag = $(raw).filter('tag').html();
    $('#body').html(bodyHtml);
    $('#tag').html(tag); 
    $('#title').html(title);
    $('#result').html(divHtml);
    $('#raw').html(raw);
});

Below is the html on the load.html page.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title load.html</title>
</head>
<body>
<div>div 1<tag>divtag</tag></div>
<tag>tag</tag>
</body>
</html>

This is the results once page has run. index.html

<html><head>
<title>index.html</title>
<script type="text/javascript" src="js/jquery/jquery-1.5.1.min.js"></script>  

<script type="text/javascript">  

$.get('load.html', function(raw){
    var bodyHtml = $(raw).filter('body').html();
    var divHtml = $(raw).filter('div').html();
    var title = $(raw).filter('title').text();
    var tag = $(raw).filter('tag').html();
    $('#body').html(bodyHtml);
    $('#tag').html(tag); 
    $('#title').html(title);
    $('#result').html(divHtml);
    $('#raw').html(raw);
});

</script> 
</head>

<body> 

<div id="title">title load.html</div>
<div id="body"></div>
<div id="result">div 1<tag>divtag</tag></div>
<div id="tag">tag</div>
<div id="raw">

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>title load.html</title>


      <div>div 1<tag>divtag</tag></div>
      <tag>tag</tag>


</div>


</body></html>

One thing to note. It looks like the isn't sent back from jquery. Also if there is multiple on the page. Shouldn't this script make it a array (example being )

Someone else seems to have figured out what causes this. But I can't figure out the correct way to integrate into my solution. Any ideas? Here is the other stackoverflow post — Richard Dev
– Richard Dev, Commented Mar 23, 2011 at 18:58

Alnitak · Accepted Answer · 2011-03-23 15:35:42Z

2

You need to wrap your $.get() call inside a "document ready" handler - at the moment the DOM elements you're trying to manipulate don't exist at the point you're making the call:

$(document).ready(function() { 
    // your code here
});

answered Mar 23, 2011 at 15:35

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Richard Dev Over a year ago

Thanks I will make sure to add that into my practice. However, the same result. Someone else seems to have figured out what causes this. But I can't figure out the correct way to integrate into my solution. Any ideas? Here is the other stackoverflow post.

Richard Dev · Accepted Answer · 2011-03-25 12:52:31Z

Here is the results. I thought it was the html() tag stripping the body, and head tags out of the variable. When I would do a alert(raw) from a url it would show the full html page. But then when I try and modify that variable, the tags () would disappear. I then thought it was jquery. So I tried a regular expression. Sure enough I got the same exact results. So I am only able to retrieve tags like title, divs, but not the body.

$(document).ready(function() { 
    $.get('load.html', function(raw){

        var matches = raw.match(/<title\b[^>]*>(.*?)<\/title>/gi);
        //var matches = matches[0].replace(/(<\/?[^>]+>)/gi, ''); // Strip HTML tags?

        alert(matches);

    }, "html");
});

Collectives™ on Stack Overflow

Grab Html Tags from HTML Variable using get() jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related