CODEWITHSUNDEEP
jquery
Abdus Sattar Bhuiyan
Abdus Sattar Bhuiyan

Reputation: 3074

How to change text inside a label tag using jquery

How can I change text Add Your Image to Change Your Image. 

<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;">
    Add Your Image
    <input type="file" name="data[Feedback][img]" class="form-control hide single_img_btn" id="1" style="display: none;">  
</label>

$('.feedbackImg').text('Change Your Image');

But it changed the label as follows :

<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;">
    Add Your Image
</label>

That means it remove input tag also. How can I keep all same except the text only?

Upvotes: 8

Views: 16164

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115212

You need to update the textNode

  1. contents() - for getting all nodes including text and comments
  2. eq() - get first element , which is textNode(label)
  3. replaceWith() - update the text content with new text

CODE: 

$('.feedbackImg').contents().eq(0).replaceWith('Change Your Image');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;">
  Add Your Image
  <input type="file" name="data[Feedback][img]" class="form-control hide single_img_btn" id="1" style="display: none;">
</label>

OR

$('.feedbackImg').contents()[0].nodeValue = 'Change Your Image';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;">
  Add Your Image
  <input type="file" name="data[Feedback][img]" class="form-control hide single_img_btn" id="1" style="display: none;">
</label>

Upvotes: 4

Snehal S
Snehal S

Reputation: 875

change the html to this

<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;">
    <span class="image_label">Add Your Image</span>
    <input type="file" name="data[Feedback][img]" class="form-control hide single_img_btn" id="1" style="display: none;">  
</label>

And then in jquery

$('.image_label').text('Change Your Image');

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

If you can change your HTML then simply wrap the text you want to change in a span to make it easier to select:

<label class="control-label col-md-offset-4 col-md-4 btn green feedbackImg" style="text-align:center;">
    <span>Add Your Image</span>
    <input type="file" name="data[Feedback][img]" class="form-control hide single_img_btn" id="1" style="display: none;">  
</label>

$('.feedbackImg span').text('Change Your Image');

If you can't change the HTML, then you would need to amend your JS code to retreive and amend the textNode itself:

$('.feedbackImg').contents().first()[0].textContent = 'Change Your Image';

Upvotes: 8

Related Questions