Jak mogę zmienić tekst elementu bez zmiany jego elementów podrzędnych?

Chciałbym dynamicznie aktualizować tekst elementu:

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

Jestem nowy w jQuery, więc to zadanie wydaje mi się dość trudne. Czy ktoś mógłby wskazać mi funkcję / selektor do użycia?

Jeśli to możliwe, chciałbym to zrobić bez dodawania nowego kontenera na tekst, który muszę zmienić.

Mark ma lepsze rozwiązanie przy użyciu jQuery , ale możesz to zrobić również w zwykłym JavaScript.

W Javascript ta childNodeswłaściwość udostępnia wszystkie węzły potomne elementu, w tym węzły tekstowe.

Tak więc, jeśli wiesz, że tekst, który chcesz zmienić, zawsze będzie pierwszą rzeczą w elemencie, to masz np. Ten HTML:

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

Możesz to zrobić:

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

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

Oczywiście nadal możesz użyć jQuery, aby wybrać <div>na pierwszym miejscu (tj var your_div = $('your_div').get(0);.).

Zaktualizuj 2018

Ponieważ jest to dość popularna odpowiedź, postanowiłem ją zaktualizować i trochę upiększyć, dodając selektor textnode do jQuery jako wtyczkę.

W poniższym fragmencie widać, że definiuję nową funkcję jQuery, która pobiera wszystkie (i tylko) textNodes. Możesz również połączyć tę funkcję za pomocą na przykład first()funkcji. Przycinam węzeł tekstowy i sprawdzam, czy po przycięciu nie jest pusty, ponieważ spacje, tabulatory, nowe wiersze itp. Są również rozpoznawane jako węzły tekstowe. Jeśli potrzebujesz również tych węzłów, po prostu usuń to z instrukcji if w funkcji jQuery.

Dodałem przykład, jak zamienić pierwszy węzeł tekstowy i jak zamienić wszystkie węzły tekstowe.

Takie podejście ułatwia czytanie kodu i łatwiejsze korzystanie z niego wiele razy i do różnych celów.

Aktualizacja 2017 (adrach) powinna nadal działać jak dobrze, jeśli wolisz.

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

Aktualizacja 2017 (adrach):

Wygląda na to, że od czasu opublikowania tego artykułu zmieniło się kilka rzeczy. Oto zaktualizowana wersja

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

Oryginalna odpowiedź (nie działa w aktualnych wersjach)

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

Źródło: http://api.jquery.com/contents/

Zobacz w akcji

Narzut :

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

To zmienia tylko pierwszy węzeł tekstowy

Po prostu zawiń tekst, który chcesz zmienić, w zakres klasą do wybrania.

Niekoniecznie odpowiada na twoje pytanie, które znam, ale prawdopodobnie lepsza praktyka kodowania. Utrzymuj porządek i prostotę

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

W konkretnym przypadku, o którym wspomniałeś:

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

... to jest bardzo proste:

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

Nie mówisz, jak chcesz to uogólniać. Jeśli, powiedzmy, chcesz zmienić tekst pierwszego węzła tekstowego w obrębie <div>, możesz zrobić coś takiego:

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

Tutaj jest jeszcze inna metoda: 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);

Wiele świetnych odpowiedzi tutaj, ale obsługują one tylko jeden węzeł tekstowy z dziećmi. W moim przypadku musiałem operować na wszystkich węzłach tekstowych i ignorować dzieci HTML, ALE ZACHOWAĆ ZAMÓWIENIE.

Więc jeśli mamy taki przypadek:

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

Możemy użyć poniższego kodu tylko do modyfikacji tekstu I ZACHOWANIA ZAMÓWIENIA

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

Oto jsfiddle z nim pracować

Myślę, że szukasz .prependTo ().

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

Możemy też wybrać element na stronie i wstawić go do innego:

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

Jeśli element wybrany w ten sposób zostanie wstawiony w innym miejscu, zostanie przeniesiony do celu (nie sklonowany):

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

Jeśli jednak istnieje więcej niż jeden element docelowy, sklonowane kopie wstawionego elementu zostaną utworzone dla każdego elementu docelowego po pierwszym.

Prosta odpowiedź:

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

Problem z odpowiedzią Marka polega na tym, że otrzymujesz również puste textnodes. Rozwiązanie jako wtyczka jQuery:

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

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

To stare pytanie, ale możesz zrobić prostą funkcję, taką jak ta, aby ułatwić sobie życie:

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

Przykład:

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

Stosowanie:

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

Wersja 2019 - Krótka i prosta

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

Wyjaśnienie

document.querySelector('#your-div-id') służy do wyboru rodzica (elementu, którego tekst zamierzasz zmienić)

.childNodes[0] wybiera węzeł tekstowy

.nodeValue = 'new text' ustawia wartość węzła tekstowego na „nowy tekst”

Ta odpowiedź jest prawdopodobnie inspirowana komentarzem Deana Martina. Nie mogę tego powiedzieć na pewno, ponieważ korzystam z tego rozwiązania od lat. Pomyślałem, że powinienem tutaj zamieścić to prawdopodobieństwo, ponieważ niektórym ludziom zależy na tym bardziej niż na tym, że jest to najlepsze rozwiązanie.