How to get a div text from html content


Tags: javascript,jquery,html,css,ajax

Problem :

Hi I am trying to get the div data from another html page. For these I am get the html data through $.ajax({}); it's returned bunch of html content from this I am trying to get div text but it's returning empty.

My Code is:

$(document).ready(function() {

    $.ajax({
      url:'/Myrewards.asp',
      type:'GET',
      success: function(data) { 
        var result = $(data).filter("#content_area").html();
        var result_1 = $(data).filter("#rewards_point_display").text();
        console.log(result);
      }
   });
});

result is returned below html code.

<form action="" method="post">
<div id="div_articleid_141">
<link type="text/css" rel="stylesheet" href="/a/c/myrewards.css">    <div id="rewards_content">    <h3>MyRewards - Reap the rewards with every purchase</h3>    It pays to go with MyRewards. Every time you make a purchase with [your company or website's name], you'll receive points [if product based, then] for the product(s) you purchase [if total amount of purchase, then] based on your total purchase amount. It's a great way to save on your next purchase whether it's for you or someone special.    <h4>Here's how it works:</h4>    <ol>   <li>Once you've placed your order and it has shipped, your MyRewards Point will be redeemable in [X] days.</li>   <li>To view your MyRewards, simply go to <a href="/MyRewards.asp">MyRewards</a>.</li>   
<li>Enter the total amount (in points) you'd like to redeem below (X points = $X).</li>   <li>You're now ready to save on your next purchase. Upon placing your order, your available MyRewards will automatically be deducted from the total purchase amount.</li>  
</ol>    <div id="rewards_point_display">  Available Points: 100<br>  Pending Points: 0  </div>    <input id="points_to_redeem" name="points_to_redeem" value="100" type="text"> 
<input id="redeem_now_button" src="/v/vspfiles/templates/253/images/Buttons/btn_redeem.gif" value="Redeem" name="go" alt="Redeem" type="image">    
<div id="rewards_terms">Want to learn more about MyRewards? For more MyRewards information, see the <a href="articles.asp?ID=140">Terms &amp; Conditions</a>.</div>
</div></div>

</form>

from above text I am trying to get rewards_point_display div text, but it's not working.

Any help?

Thanks



Solution :

IMO, you should use jQuery.parseHTML()

Parses a string into an array of DOM nodes.

var bad = $.parseHTML(result);

OR

Use .filter()

console.log($(result).filter('#rewards_point_display').html());

Reference

var result = "<div>First Div</div><div id='rewards_point_display'>Text of rewards_point_display</div>";

//Use filter
console.log($(result).filter('#rewards_point_display').html());


//use parseHTML
var data = $.parseHTML(result);
$(data).each(function() {
    console.log($(this).html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    CSS Howto..

    How to design select box using css

    simple text input box “autosuggest” script - how to overlap with css

    how to animate .jpg image with CSS?

    how to remove one canvas element from displaying on top of another canvas element

    How to move image slowly with animation when appending the image to tag

    How to achieve a left and right background split leaving middle div visible?

    CSS - How to insure that a input will be in the middle of a specific area

    How to keep transparent radial background smooth in browsers other than Chrome?

    how to make NGINX serve static content like .js, .css, .html?

    background-image: url(“images/plaid.jpg”) no-repeat; wont show up

    How to select multiple elements using CSS

    How to link a table cell?

    Show header when at top of page - Scroll event re-firing issue

    how to apply css to a particular asp.net table?

    How to vertically center a div for all browsers?

    How do I lay out my content divs in a similar manner to Facebook Timeline?

    How to get Floating DIVs inside fixed-width DIV to continue horizontally?

    How to find the proper offsets for CSS sprites?

    How to create that background on my page with css [duplicate]

    CSS how to center ::after pseudo elem

    How can I invoke an “AktionLink” in an “onClick” event in a “div”?

    CSS - How to Style a Selected Radio Buttons Label?

    How can I manage css and php gd2 font size?

    How to select two different elements with an XPath query

    How to override bootstrap styles?

    How to design resolution independent CSS elements?

    How do I fit text into footer margins

    How to center a span in a div

    How to keep css animation effect?

    How to make Css transition effect work on Safari and Chrome?