Chỉ thay thế văn bản bên trong một div bằng jquery

Tôi có một div như:

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

Tôi đang cố gắng chỉ thay đổi văn bản từ "Xin chào, tôi là văn bản" thành "Xin chào, tôi thay thế" bằng cách sử dụng jquery. Điều này có thể dễ dàng nhưng tôi không thể làm được.

Sử dụng $('#one').text('')chỉ làm trống toàn bộ #Onediv.

Văn bản không nên tự có. Đặt nó vào một spanphần tử.

Thay đổi nó thành thế này:

<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');

Tìm các nút văn bản ( nodeType==3) và thay thế textContent:

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

Ví dụ trực tiếp: http://jsfiddle.net/VgFwS/

Bạn cần đặt văn bản thành một cái gì đó khác với một chuỗi rỗng. Ngoài ra, hàm .html () sẽ làm điều đó trong khi vẫn bảo toàn cấu trúc HTML của div.

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

Nếu bạn thực sự biết văn bản bạn sẽ thay thế, bạn có thể sử dụng

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

http://jsfiddle.net/5rWwh/

Hoặc là

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

$('#one').contents(':not(*)') chọn các nút con không phải phần tử trong trường hợp này là các nút văn bản và nút thứ hai là nút mà chúng ta muốn thay thế.

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

Một cách tiếp cận khác là giữ nguyên phần tử đó, thay đổi văn bản, sau đó nối phần tử đó lại

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

Đề phòng nếu bạn không thể thay đổi HTML. Rất sơ khai nhưng ngắn và hoạt động. (Nó sẽ làm trống div cha do đó div con sẽ bị xóa)

$('#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>