Як я можу змінити текст елемента, не змінюючи його дочірніх елементів?

Я хотів би динамічно оновити текст елемента:

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

Я новачок у jQuery, тому це завдання здається для мене досить складним. Чи може хтось вказати мені на функцію / селектор, який слід використовувати?

Якщо це можливо, я хотів би зробити це без додавання нового контейнера для тексту, який мені потрібно змінити.

Марк отримав краще рішення за допомогою jQuery , але ви можете це зробити і в звичайному JavaScript.

В Javascript childNodesвластивість дає всі дочірні вузли елемента, включаючи текстові.

Отже, якщо ви знали, що текст, який ви хочете змінити, завжди буде першим ділом у елементі, то надайте, наприклад, цей HTML:

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

Ви можете це зробити:

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

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

Звичайно, ви все одно можете використовувати jQuery для вибору <div>в першу чергу (тобто var your_div = $('your_div').get(0);).

Оновлення 2018 року

Оскільки це досить популярна відповідь, я вирішив її трохи оновити та прикрасити, додавши селектор текстових вузлів до jQuery як плагін.

У фрагменті нижче ви бачите, що я визначаю нову функцію jQuery, яка отримує всі (і лише) текстові вузли. Цю функцію можна пов'язати також, наприклад, з first()функцією. Я обробляю текстовий вузол і перевіряю, чи не порожній він після обрізки, оскільки пробіли, вкладки, нові рядки тощо також розпізнаються як текстові вузли. Якщо вам потрібні ці вузли, просто видаліть їх з оператора if у функції jQuery.

Я додав приклад, як замінити перший текстовий вузол і як замінити всі текстові вузли.

Такий підхід полегшує читання коду та простіше використовувати його кілька разів та з різною метою.

Update 2017 (adrach) має працювати, а якщо ви віддаєте перевагу.

Як розширення 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>

Оновлення 2017 року (adrach):

Схоже, кілька речей змінилися з моменту публікації. Ось оновлена ​​версія

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

Оригінальна відповідь (не працює для поточних версій)

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

Джерело: http://api.jquery.com/contents/

Дивіться в дії

Розмітка:

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

Це змінює лише перший текстовий вузол

Просто загортайте текст, який ви хочете змінити, в проміжок із класом, який потрібно вибрати.

Це не обов'язково відповідає на ваше запитання, яке я знаю, але, мабуть, краща практика кодування. Зберігайте речі чистими та простими

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

Вуаля!

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

Для конкретного випадку ви згадали:

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

... це дуже просто:

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

Ви не заявляєте, як ви хочете це узагальнити. Якщо, скажімо, ви хочете змінити текст першого текстового вузла в межах <div>, ви можете зробити щось подібне:

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

Ось ще один метод: 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>

ПІДКЛЮЧЕННЯ

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

Тут багато чудових відповідей, але вони обробляють лише один текстовий вузол з дітьми. У моєму випадку мені потрібно було оперувати всіма текстовими вузлами та ігнорувати html-діти.

Отже, якщо у нас є такий випадок:

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

Наступний код ми можемо використовувати лише для зміни тексту та ЗБЕРЕЖЕННЯ ЗАМОВЛЕННЯ

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

Ось jsfiddle його роботи

Я думаю, ти шукаєш .prependTo ().

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

Ми також можемо вибрати елемент на сторінці і вставити його в іншу:

$ ('h2'). prependTo ($ ('. контейнер'));

Якщо вибраний таким чином елемент буде вставлено в інше місце, він буде переміщений у ціль (не клонований):

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

Якщо є більше одного цільового елемента, однак для кожної цілі після першого буде створено клоновані копії вставленого елемента.

Проста відповідь:

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

Проблема з відповіддю Марка полягає в тому, що ви також отримуєте порожні текстові коди. Рішення як плагін jQuery:

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

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

Це старе питання, але ви можете зробити просту функцію, як ця, щоб полегшити ваше життя:

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

Приклад:

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

Використання:

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

Вечірня 2019 року - коротка та проста

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

Пояснення

document.querySelector('#your-div-id') використовується для вибору батьків (елемент, текст якого ви збираєтеся змінити)

.childNodes[0] вибирає текстовий вузол

.nodeValue = 'new text' встановлює значення текстового вузла на "новий текст"

Можливо, ця відповідь надихнула коментаря Діна Мартіна. Не можу сказати точно, оскільки я вже багато років використовую це рішення. Я просто подумав, що я повинен розмістити цю ймовірність тут, тому що деякі люди переймаються цим більше, ніж тим, що це найкраще рішення.