Как изменить только текстовый узел в элементе

Question

У меня есть следующий HTML:

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

И я хочу, чтобы изменить метку подписи к Title с JQuery. Так что я

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

И заменить все внутренние HTML (с abbr тэгом)

Итак, что самый простой способ заменить только Name?

Answer 1

Если вы используете contents() метод также будет возвращать текстовые узлы. Поскольку Jquery не имеет методов текстового узла, преобразование последнего узла в узел DOM

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

Демо: http://jsfiddle.net/yPAST/1/

Answer 2

Вы можете выбрать только abbr элемент, сохраните его, а затем заменить все содержимое с сохраненным элемента плюс измененный заголовок:

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

Смотрите эту fiddle

Answer 3

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

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

Answer 4

вы можете использовать replace достижения этой цели

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

проверить его: http://jsfiddle.net/DyzMJ/

Answer 5

решения Evans добавлено в JQuery сноски, чтобы это использовать удобный:

// 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(); 
} 

Использование: $('myselector').content('NewContentString');

Answer 6

Извините за поздний ответ ... Но вот способ сделать это, используя только jQuery:

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

Answer 7

Это решение, которое работает для большинства браузеров

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

Это один пришел близко, но дали проблемы в ie8, поскольку TextContent не поддерживается

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

Answer 8

если вы манипулируете более 1 вы можете выбрать каждую метку и заменить текст на jquery:

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

и для второй этикетки:

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

и так далее ...