как изменить текст на кнопке без изменения другие теги

Question

как изменить текст в кнопке без изменения других тегов?

моя кнопка:

<button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
All Items 
<span class="caret"></span> 
</button> 

мое выпадающее меню:

<ul class="dropdown-menu"> 
<li><a id="AllItems" href="#">AllItems</a></li> 
<li><a id="Countries" href="#">Countries</a></li> 
<li><a id="Ships" href="#">Ships</a></li> 
</ul> 

Я попытался следующий Но пядь тег был удален:

$('.dropdown-menu li a').click(function() { 
var item = $(this).text(); 
$('button[id=ItemForSearch]').text(item); 
}); 

мне нужно просто измените текст. Но я понятия не имею !!

Answer 1

Вам нужно заменить только первый текстовый узел в кнопке, вот в чем проблема. Когда вы используете .text() или .html(), он заменяет все содержимое кнопки.

Попробуйте

$('.dropdown-menu li a').click(function() { 
    $('#ItemForSearch').contents().eq(0).replaceWith($(this).text()); 
}); 

Demo:. Fiddle