How to change text inside a label tag using jquery

Question

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?

Answer 1

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';

Answer 2

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>