Как я могу изменить текст элемента, не меняя его дочерние элементы?

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

<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, которая получает все (и только) textNodes. Вы можете связать эту функцию, например, с 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)

//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 (адрах):

Похоже, с тех пор, как это было опубликовано, несколько вещей изменились. Вот обновленная версия

$("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>

Jquery

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 - Short & Simple

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

объяснение

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

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

.nodeValue = 'new text' устанавливает значение текстового узла на «новый текст»

Этот ответ, возможно, вдохновлен комментарием Дина Мартина. Не могу сказать наверняка, так как использую это решение уже много лет. Просто подумал, что мне стоит опубликовать эту вероятность здесь, потому что некоторых людей это волнует больше, чем то, что это лучшее решение.