Làm cách nào để thay đổi văn bản của một phần tử mà không thay đổi các phần tử con của nó?

Tôi muốn cập nhật động văn bản của phần tử:

<div>
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

Tôi mới sử dụng jQuery, vì vậy nhiệm vụ này có vẻ khá khó khăn đối với tôi. Ai đó có thể chỉ cho tôi một chức năng / bộ chọn để sử dụng không?

Nếu có thể, tôi muốn làm điều đó mà không cần thêm vùng chứa mới cho văn bản tôi cần thay đổi.

Mark's có một giải pháp tốt hơn bằng cách sử dụng jQuery , nhưng bạn cũng có thể làm điều này trong JavaScript thông thường.

Trong Javascript, thuộc childNodestính cung cấp cho bạn tất cả các nút con của một phần tử, bao gồm cả các nút văn bản.

Vì vậy, nếu bạn biết văn bản bạn muốn thay đổi luôn là thứ đầu tiên trong phần tử, thì hãy cho ví dụ như HTML này:

<div id="your_div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

Bạn có thể làm điều này:

var your_div = document.getElementById('your_div');

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

Tất nhiên, bạn vẫn có thể sử dụng jQuery để chọn <div>ở vị trí đầu tiên (tức là var your_div = $('your_div').get(0);).

Cập nhật 2018

Vì đây là một câu trả lời khá phổ biến nên tôi quyết định cập nhật và làm đẹp nó một chút bằng cách thêm công cụ chọn textnode vào jQuery làm plugin.

Trong đoạn mã bên dưới, bạn có thể thấy rằng tôi xác định một hàm jQuery mới nhận tất cả (và chỉ) các textNodes. Bạn cũng có thể xâu chuỗi hàm này với ví dụ như first()hàm. Tôi thực hiện cắt trên nút văn bản và kiểm tra xem nó có trống không sau khi cắt vì dấu cách, tab, dòng mới, v.v. cũng được nhận dạng là nút văn bản. Nếu bạn cũng cần những nút đó thì chỉ cần xóa nó khỏi câu lệnh if trong hàm jQuery.

Tôi đã thêm một ví dụ về cách thay thế nút văn bản đầu tiên và cách thay thế tất cả các nút văn bản.

Cách tiếp cận này giúp bạn đọc mã dễ dàng hơn và dễ dàng sử dụng nó nhiều lần với các mục đích khác nhau.

Bản cập nhật 2017 (adrach) vẫn sẽ hoạt động tốt nếu bạn thích điều đó.

Dưới dạng phần mở rộng jQuery

//Add a jQuery extension so it can be used on any jQuery object
jQuery.fn.textNodes = function() {
  return this.contents().filter(function() {
    return (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== "");
  });
}

//Use the jQuery extension
$(document).ready(function(){
  $('#replaceAll').on('click', () => {
    $('#testSubject').textNodes().replaceWith('Replaced');
  });

  $('#replaceFirst').on('click', () => {
    $('#testSubject').textNodes().first().replaceWith('Replaced First');
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
   **text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **also text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

Javascript (ES) eqivilant

//Add a new function to the HTMLElement object so it cna be used on any HTMLElement
HTMLElement.prototype.textNodes = function() {
  return [...this.childNodes].filter((node) => {
    return (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "");
  });
}

//Use the new HTMLElement function
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#replaceAll').addEventListener('click', () => {
    document.querySelector('#testSubject').textNodes().forEach((node) => {
      node.textContent = 'Replaced';
    });
  });

  document.querySelector('#replaceFirst').addEventListener('click', function() {
    document.querySelector('#testSubject').textNodes()[0].textContent = 'Replaced First';
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
  **text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **also text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

Cập nhật 2017 (adrach):

Có vẻ như một số thứ đã thay đổi kể từ khi điều này được đăng. Đây là một phiên bản cập nhật

$("div").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("change text");

Câu trả lời gốc (Không hoạt động cho các phiên bản hiện tại)

$("div").contents().filter(function(){ return this.nodeType == 3; })
.filter(':first').text("change text");

Nguồn: http://api.jquery.com/contents/

Xem trong hành động

Đánh dấu:

$(function() {
  $('input[type=button]').one('click', function() {
    var cache = $('#parent').children();
    $('#parent').text('Altered Text').append(cache);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">Some text
  <div>Child1</div>
  <div>Child2</div>
  <div>Child3</div>
  <div>Child4</div>
</div>
<input type="button" value="alter text" />

<div id="divtochange">
    **text to change**
    <div>text that should not change</div>
    <div>text that should not change</div>
</div>

$(document).ready(function() {
    $("#divtochange").contents().filter(function() {
            return this.nodeType == 3;
        })
        .replaceWith("changed text");
});

Điều này chỉ thay đổi textnode đầu tiên

Chỉ cần bọc văn bản bạn muốn thay đổi trong một khoảng với một lớp để chọn.

Không nhất thiết phải trả lời câu hỏi của bạn mà tôi biết, nhưng, có lẽ là một phương pháp viết mã tốt hơn. Giữ mọi thứ sạch sẽ và đơn giản

<div id="header">
   <span class="my-text">**text to change**</span>
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

Voilà!

$('#header .mytext').text('New text here')

Đối với trường hợp cụ thể bạn đã đề cập:

<div id="foo">
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

... nó rất là dễ:

var div = document.getElementById("foo");
div.firstChild.data = "New text";

Bạn không nói rõ bạn muốn khái quát điều này như thế nào. Giả sử, nếu bạn muốn thay đổi văn bản của nút văn bản đầu tiên trong <div>, bạn có thể làm như sau:

var child = div.firstChild;
while (child) {
    if (child.nodeType == 3) {
        child.data = "New text";
        break;
    }
    child = child.nextSibling;
}

Đây là chưa một phương pháp khác: http://jsfiddle.net/qYUBp/7/

HTML

<div id="header">
   **text to change**
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

JQUERY

var tmp=$("#header>div").html();
$("#header").text("its thursday").append(tmp);

Rất nhiều câu trả lời tuyệt vời ở đây nhưng chúng chỉ xử lý một nút văn bản với trẻ em. Trong trường hợp của tôi, tôi cần thao tác trên tất cả các nút văn bản và bỏ qua các nút con html NHƯNG BẢO QUẢN LỆNH.

Vì vậy, nếu chúng ta gặp trường hợp như thế này:

<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

Chúng tôi có thể sử dụng mã sau để chỉ sửa đổi văn bản VÀ BẢO QUẢN ĐƠN HÀNG

    $('#parent').contents().filter(function() {
        return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
    }).each(function() {
    		//You can ignore the span class info I added for my particular application.
        $(this).replaceWith(this.nodeValue.replace(/(\w+)/g,"<span class='IIIclassIII$1' onclick='_mc(this)' onmouseover='_mr(this);' onmouseout='_mt(this);'>$1X</span>"));
	});

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

Đây là jsfiddle của nó hoạt động

Tôi nghĩ bạn đang tìm kiếm .prependTo ().

http://api.jquery.com/prependTo/

Chúng tôi cũng có thể chọn một phần tử trên trang và chèn nó vào một phần tử khác:

$ ('h2'). prependTo ($ ('. container'));

Nếu một phần tử được chọn theo cách này được chèn vào nơi khác, nó sẽ được chuyển vào đích (không được sao chép):

<div class="container">  
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div> 
</div>

Tuy nhiên, nếu có nhiều hơn một phần tử đích, các bản sao nhân bản của phần tử được chèn vào sẽ được tạo cho mỗi mục tiêu sau phần tử đầu tiên.

Câu trả lời đơn giản:

$("div").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with"

Vấn đề với câu trả lời của Mark là bạn cũng nhận được các textnodes trống. Giải pháp dưới dạng plugin jQuery:

$.fn.textnodes = function () {
    return this.contents().filter(function (i,n) {
        return n.nodeType == 3 && n.textContent.trim() !== "";
    });
};

$("div").textnodes()[0] = "changed text";

Đây là một câu hỏi cũ nhưng bạn có thể tạo một hàm đơn giản như sau để làm cho cuộc sống của bạn dễ dàng hơn:

$.fn.toText = function(str) {
    var cache = this.children();
    this.text(str).append(cache);
}

Thí dụ:

<div id="my-div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

Sử dụng:

$("#my-div").toText("helloworld");

2019 vesrsion - Ngắn và Đơn giản

document.querySelector('#your-div-id').childNodes[0].nodeValue = 'new text';

Giải trình

document.querySelector('#your-div-id') được sử dụng để chọn phần tử gốc (phần tử mà văn bản bạn sắp thay đổi)

.childNodes[0] chọn nút văn bản

.nodeValue = 'new text' đặt giá trị nút văn bản thành "văn bản mới"

Câu trả lời này có thể được lấy cảm hứng từ nhận xét của Dean Martin. Không thể nói chắc chắn vì tôi đã sử dụng giải pháp này trong nhiều năm rồi. Tôi chỉ nghĩ rằng tôi nên đăng xác suất này ở đây vì một số người quan tâm đến nó nhiều hơn thực tế rằng đây là giải pháp tốt nhất.