Замініть лише текст усередині div, використовуючи jquery

У мене є дів, як:

<div id="one">
       <div class="first"></div>
       "Hi I am text"
       <div class="second"></div>
       <div class="third"></div>
</div>

Я намагаюся змінити лише текст з "Привіт, я текст" на "Привіт, я заміню", використовуючи jquery. Це може бути простим, але я не в змозі це зробити.

За допомогою $('#one').text('')просто випорожнюється весь #Oneдів.

Текст не повинен бути самостійним. Покладіть його в spanелемент.

Змініть це на це:

<div id="one">
       <div class="first"></div>
       <span>"Hi I am text"</span>
       <div class="second"></div>
       <div class="third"></div>
</div>

$('#one span').text('Hi I am replace');

Знайдіть текстові вузли ( nodeType==3) та замініть textContent:

$('#one').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});

Приклад в реальному часі : http://jsfiddle.net/VgFwS/

Потрібно встановити текст на щось інше, ніж порожній рядок. Крім того, функція .html () повинна виконувати це, зберігаючи структуру HTML розділу.

$('#one').html($('#one').html().replace('text','replace'));

Якщо ви дійсно знаєте текст, який ви збираєтеся замінити, ви можете використовувати

$('#one').contents(':contains("Hi I am text")')[0].nodeValue = '"Hi I am replace"';

http://jsfiddle.net/5rWwh/

Або

$('#one').contents(':not(*)')[1].nodeValue = '"Hi I am replace"';

$('#one').contents(':not(*)') вибирає неелементні дочірні вузли в цьому випадку текстові вузли, а другий вузол - той, який ми хочемо замінити.

http://jsfiddle.net/5rWwh/1/

Ще один підхід - зберегти цей елемент, змінити текст, а потім додати цей елемент назад

const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)

Про всяк випадок, якщо ви не можете змінити HTML. Дуже примітивно, але коротко & працює. (Він буде порожнім батьківським дівом, отже, дочірні діви будуть видалені)

$('#one').text('Hi I am replace');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="one">
  <div class="first"></div>
  "Hi I am text"
  <div class="second"></div>
  <div class="third"></div>
</div>