All geek questions in one place

How to change text inside tag tag using jquery

How to change the 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 he 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>

This means that it also removes the input tag. How can I save everything except text?

+5
source share
3 answers

If you can change your HTML, just 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 cannot change the HTML, then you will need to change your JS code to restore and change the textNode itself:

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

You need to update textNode

  • contents() - to get all nodes, including text and comments
  • eq() - get the first element, which is textNode (label)
  • replaceWith() - update 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>
+3
source

change 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');
0
source

Source: https://habr.com/ru/post/1235185/

More articles:


All Articles