Retrieve span value [closed]

问题

I am not able to find how to get the value of span(80.40) from the below given html.

<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del>
  <span>$80.40</span>
</div>

This is my company websites code and i dont have access to edit anything. I have to incorporate a new feature using a google tag manager and for that i needed the value in span element. I tried some options mentioned below.

$(".col-xs-4 service-fee-total totals cart-total text-right cart-highlight span").text()

document.getElementsByClassName("col-xs-4 service-fee-total totals cart-total text-right cart-highlight");

回答1:

You can use document.querySelector in order to locate the span and innerHTML for getting the value like this:

console.log(document.querySelector('span').innerHTML);

<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del> <span>$80.40</span>
</div>

Notice that the previous code is just an alternative and that you might want to use a query selector more specific than 'span' in order to get the proper value according to your use case and innerText or textContent instead of innerHTML. For example (Thanks to Tschallacka):

document.querySelector('[data-total-name="service-fee-total"] > span').innerText

console.log(document.querySelector('[data-total-name="service-fee-total"] > span').innerText);

<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del> <span>$80.40</span>
</div>

jQuery version

Again, here you can use a selector (i.e.: 'span:first') in order to get the span and text in order to get the span text. Something like this:

console.log($('span:first').text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del> <span>$80.40</span>
</div>

回答2:

What code are you using? Why isn't it working? Are there any errors being produced?

To make things really simple, you could just hook an ID to your span and use this JS (because jQuery would be way overkill if you don't need it for anything else):

var val = document.getElementById("id-goes-here").innerHTML;

回答3:

you can do this with jquery

at first you must include jquery cdn link in your html file.

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

after that you can write

$(".cart-highlight > span").html();

and you will get the content of span.

回答4:

Full workable example, in Alert it shows the text:

  

      <html>
        <body>
        
        <div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
         <del></del>
         <span id="span_Id">$80.40</span>
        </div>
        
        <button onclick="displayDate()">Click Me</button>
        
        <script>
        function displayDate() {
           var span_Text = document.getElementById("span_Id").innerText;
           alert (span_Text);
        }
        </script>
        </body>
        </html>

来源：https://stackoverflow.com/questions/51729085/retrieve-span-value

标签

javascript

jquery

html