How to change only text node in element

Question

I have next html:

<label for="user_name">
  <abbr title="required">*</abbr>
  Name
</label>

And I want to change label caption to Title with jquery. So I do

$('label[for=user_name]').html('Title')

And it replaces all inner html (including abbr tag)

So, what's the easiest way to replace only Name?

score 84 · Accepted Answer · answered Mar 31 '12 at 14:15

84

If you use contents() method it will also return text nodes. Since jQuery doesn't have text node methods, convert last node to a DOM node

$('label[for="user_name"]').contents().last()[0].textContent='Title';

Demo: http://jsfiddle.net/yPAST/1/

answered Mar 31 '12 at 14:15

charlietfl

170,828
13
121
150

Interesting.. I have only one label per input, so it's appropriate for me – mikdiet Mar 31 '12 at 18:13
3

Note: the `textContent` property is *not* available in IE before version 9. – iCollect.it Ltd Feb 09 '15 at 09:44

Dom · Answer 2 · 2018-08-30T08:35:40.783

50

Sorry for the late reply... But here is a way to do so using only jQuery:

$('label').contents().last().replaceWith('Title');

edited Aug 30 '18 at 08:35

answered Mar 14 '13 at 17:23

Dom

38,906
12
52
81

1

You saved the day. Thanks :) – Kushagra Gour Dec 14 '14 at 20:48
3

Note that a string to `replaceWith` is treated like HTML; if it contains tags it will be parsed to DOM elements. – holmis83 Jan 15 '16 at 12:05
These answers are good, so +1, but its brittle to navigate the DOM like this. When using jQuery it's a good idea to avoid .first(), .last(), .prev(), .next(), etc. – png Jun 19 '18 at 22:33

score 3 · Answer 3 · answered Mar 31 '12 at 13:53

3

It may not be the prettiest way, but this works:

var $label = $('label[for=user_name]');
$label.html($label.html().replace("Name", "Title"));

answered Mar 31 '12 at 13:53

Code Maverick

20,171
12
62
114

oops!! same answer i have posted..getting so much late :( – Jignesh Rajput Mar 31 '12 at 14:04

score 1 · Answer 4 · answered Jan 13 '13 at 13:01

Evans solution added to jquery fn to make it's use comfortable:

// get/change node content not children
jQuery.fn.content = function( n ){
    var o = $(this).clone();
    var c = o.children().remove();
    if (typeof n === "string" ){
        o.html(n);
        $(this).html(c).append(n);
    }
    return o.html();
}

Usage :$('myselector').content('NewContentString');

score 1 · Answer 5 · edited Jun 26 '13 at 22:43

1

This is the solution that worked for the most browsers

$('label[for="user_name"]').contents().last()[0].nodeValue = 'Title';

This one came close but gave issues in ie8 since textContent is not supported

$('label[for="user_name"]').contents().last()[0].textContent='Title';

edited Jun 26 '13 at 22:43

khr055

28,690
16
36
48

answered Jun 26 '13 at 22:22

user2525982

19
1

Note: the `textContent` property is *not* available in IE before version 9. – iCollect.it Ltd Feb 09 '15 at 09:44

score 1 · Answer 6 · answered Mar 31 '12 at 13:51

You can select only the abbr element, store it, and then replace the whole content with the stored element plus the changed caption:

$('label[for="user_name"]').each(function(){
   var a = $(this).children('abbr');
   $(this).html(a).append('Title');
});

See this fiddle

score 1 · Answer 7 · answered Mar 31 '12 at 14:01

1

you can use replace accomplish this

  var html = $('label[for=user_name]').html().replace('Name','Testing');
  $('label[for=user_name]').html(html);

check it : http://jsfiddle.net/DyzMJ/

answered Mar 31 '12 at 14:01

Jignesh Rajput

3,538
30
50

score 0 · Answer 8 · answered Oct 07 '15 at 11:35

if you are manipulating more than 1 label you can select each label and replace text with jquery:

$('label[for="user_name"]').contents().last().replaceWith("Title");

and for the second label :

$('label[for="user_lastname"]').contents().last().replaceWith("Title2");

and so on ...

How to change only text node in element

8 Answers8

Linked

Related