Use jQuery to change nested text

Question

<div class="registrationField BIRTH_DATE">
 <span class="registrationlabel BIRTH_DATE">
  <label for="registrationTextField_3">Birth Date (M/D/YY)</label>:
  <span class="registration_requiredCue">*</span>
 </span>
 <input class="registrationInput registrationTextField BIRTH_DATE" id="registrationTextField_3" type="text"></div>

I want to change the text of the label (in this case 'Birth Date (M/D/YY)') however since the label is does not have a class or ID I can't quite figure out how to do so. Unfortunately I don't have access to the HTML portion of this form, so I need to rely on jQuery to change the label. I've tried over a dozen methods (most from similar questions on this site). The best I've been able to do is hook into the out span, but because of how the form is generated I can't guarantee that the label will be the same each time so I can't just replace that.

My current iteration doesn't work at all.

$(document).ready(function(){$(".registrationlabel.BIRTH_DATE").contents().filter(function(){return this.nodeType === 3;}).find("Birth").replaceWith("Death");});

find('Birth') is not valid. Birth is not a valid selector string. — Taplar
– Taplar, Commented Apr 17, 2020 at 14:52
Why not just update the entire label[for="registrationTextField_3"]? — Taplar
– Taplar, Commented Apr 17, 2020 at 14:52

palaѕн · Accepted Answer · 2020-04-17 14:53:12Z

1

You can use jquery :contains selector here to find any label with text Birth Date and then using jquery .text() method replace text "Birth" with "Death" like:

$(".registrationlabel.BIRTH_DATE label:contains('Birth Date')")
  .text((i, v) => v.replace("Birth", "Death"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="registrationField BIRTH_DATE">
 <span class="registrationlabel BIRTH_DATE">
  <label for="registrationTextField_3">Birth Date (M/D/YY)</label>:
  <span class="registration_requiredCue">*</span>
 </span>
</div>

answered Apr 17, 2020 at 14:53

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

Comments

matthias_h · Accepted Answer · 2020-04-17 14:53:58Z

0

You can select the label by its for attribute:

 $("label[for='registrationTextField_3']").text("New Text");

answered Apr 17, 2020 at 14:53

matthias_h

11.4k9 gold badges24 silver badges40 bronze badges

Collectives™ on Stack Overflow

Use jQuery to change nested text

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related