Bagaimana cara mengubah teks elemen tanpa mengubah elemen anaknya?

Saya ingin memperbarui teks elemen secara dinamis:

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

Saya baru mengenal jQuery, jadi tugas ini tampaknya cukup menantang bagi saya. Bisakah seseorang mengarahkan saya ke fungsi / pemilih untuk digunakan?

Jika memungkinkan, saya ingin melakukannya tanpa menambahkan wadah baru untuk teks yang perlu saya ubah.

Mark mendapatkan solusi yang lebih baik menggunakan jQuery , tetapi Anda mungkin juga dapat melakukan ini di JavaScript biasa.

Dalam Javascript, childNodesproperti memberi Anda semua node turunan dari suatu elemen, termasuk node teks.

Jadi, jika Anda tahu teks yang ingin Anda ubah selalu menjadi hal pertama dalam elemen, lalu berikan contoh HTML ini:

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

Anda bisa melakukan ini:

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

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

Tentu saja, Anda masih dapat menggunakan jQuery untuk memilih <div>di tempat pertama (yaitu var your_div = $('your_div').get(0);).

Perbarui 2018

Karena ini adalah jawaban yang cukup populer, saya memutuskan untuk memperbarui dan mempercantiknya sedikit dengan menambahkan pemilih textnode ke jQuery sebagai plugin.

Dalam potongan di bawah ini Anda dapat melihat bahwa saya mendefinisikan fungsi jQuery baru yang mendapatkan semua (dan hanya) textNodes. Anda dapat menghubungkan first()fungsi ini juga dengan misalnya fungsi tersebut. Saya melakukan trim pada node teks dan memeriksa apakah tidak kosong setelah trim karena spasi, tab, baris baru, dll. Juga dikenali sebagai node teks. Jika Anda membutuhkan node itu juga, cukup hapus itu dari pernyataan if di fungsi jQuery.

Saya menambahkan contoh bagaimana mengganti simpul teks pertama dan bagaimana mengganti semua simpul teks.

Pendekatan ini membuatnya lebih mudah untuk membaca kode dan lebih mudah untuk digunakan berkali-kali dan dengan tujuan yang berbeda.

The Perbarui 2017 (adrach) harus tetap bekerja dengan baik jika Anda lebih suka itu.

Sebagai ekstensi 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>

Eqivilant Javascript (ES)

//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>

Perbarui 2017 (adrach):

Sepertinya ada beberapa hal yang berubah sejak ini diposting. Ini adalah versi yang diperbarui

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

Jawaban asli (Tidak berfungsi untuk versi saat ini)

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

Sumber: http://api.jquery.com/contents/

Lihat Beraksi

Markup:

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

Ini hanya mengubah textnode pertama

Cukup bungkus teks yang ingin Anda ubah dalam suatu rentang dengan kelas untuk dipilih.

Belum tentu menjawab pertanyaan Anda, saya tahu, tapi, mungkin praktik pengkodean yang lebih baik. Jaga semuanya tetap bersih dan sederhana

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

Untuk kasus spesifik yang Anda sebutkan:

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

... ini sangat mudah:

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

Anda tidak menyatakan bagaimana Anda ingin menggeneralisasikan ini. Jika, katakanlah, Anda ingin mengubah teks dari simpul teks pertama di dalam <div>, Anda dapat melakukan sesuatu seperti ini:

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

Berikut adalah belum metode lain: 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);

Banyak jawaban bagus di sini tetapi mereka hanya menangani satu simpul teks dengan anak-anak. Dalam kasus saya, saya perlu mengoperasikan semua node teks dan mengabaikan anak html TAPI MELESTARIKAN PEMESANAN.

Jadi jika kita memiliki kasus seperti ini:

<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>

Kita dapat menggunakan kode berikut untuk memodifikasi teks saja DAN MELESTARIKAN PEMESANAN

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

Berikut adalah jsfiddle itu bekerja

Saya pikir Anda sedang mencari .prependTo ().

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

Kami juga dapat memilih elemen di halaman dan memasukkannya ke yang lain:

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

Jika elemen yang dipilih dengan cara ini disisipkan di tempat lain, itu akan dipindahkan ke target (tidak digandakan):

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

Namun, jika ada lebih dari satu elemen target, salinan kloning dari elemen yang disisipkan akan dibuat untuk setiap target setelah yang pertama.

Jawaban sederhana:

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

Masalah dengan jawaban Mark adalah Anda mendapatkan textnode kosong juga. Solusi sebagai plugin jQuery:

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

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

Ini adalah pertanyaan lama tetapi Anda dapat membuat fungsi sederhana seperti ini untuk membuat hidup Anda lebih mudah:

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

Contoh:

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

Pemakaian:

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

Vesrsion 2019 - Pendek & Sederhana

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

Penjelasan

document.querySelector('#your-div-id') digunakan untuk memilih induk (elemen teks yang akan Anda ubah)

.childNodes[0] memilih node teks

.nodeValue = 'new text' setel nilai simpul teks ke "teks baru"

Jawaban ini mungkin terinspirasi dari komentar Dean Martin. Tidak dapat mengatakan dengan pasti karena saya telah menggunakan solusi ini selama bertahun-tahun sekarang. Hanya berpikir saya harus memposting probabilitas ini di sini karena beberapa orang lebih memedulikannya daripada fakta bahwa ini adalah solusi terbaik.