How to retrieve and set text on layered span tag using jquery

January 29, 2022

I have the following button element. It has no ID tag.

<button type="button" class="btn wdg-button" data-ng-click="Rules.click_next(data, Form.items['next'])"><div class="btn-docking-container dock-alter"><!-- ngIf: '' && 'left' == 'left' -->
<span class="wdg-button-label dock-alter-next-options">next</span><!-- ngIf: '' && 'left' == 'right' --></div></button>

I am trying to retrieve the value of the button that I see on the screen which is ‘next’. And I would also like to change this value. There is no id tag, so I am trying to use the css classes. Here are my attempts to retrieve the value from this element, but they both return nothing.

//First attempt

console.log("button text = " + $('.wdg-button-label .dock-alter-next-options').text());

//Second Attempt

console.log("button text = " + $('.btn .wdg-button').text());

>Solution :

You can do this two ways.

Using classes for the same span as below

console.log("button text = " + $('.wdg-button-label.dock-alter-next-options').text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn wdg-button" data-ng-click="Rules.click_next(data, Form.items['next'])">
  <div class="btn-docking-container dock-alter">
    <!-- ngIf: '' && 'left' == 'left' -->
    <span class="wdg-button-label dock-alter-next-options">next</span><!-- ngIf: '' && 'left' == 'right' -->
  </div>
</button>

The other way is to use jQuery children method and access the element you want the text from as below:

console.log("button text = " + $('.btn.wdg-button').children('div').children('span').text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn wdg-button" data-ng-click="Rules.click_next(data, Form.items['next'])">
  <div class="btn-docking-container dock-alter">
    <!-- ngIf: '' && 'left' == 'left' -->
    <span class="wdg-button-label dock-alter-next-options">next</span><!-- ngIf: '' && 'left' == 'right' -->
  </div>
</button>