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

Question

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

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

Я новичок в jQuery, поэтому эта задача кажется мне довольно сложной.Может кто-нибудь указать мне на функцию / селектор для использования?

Если это возможно, я бы хотел сделать это без добавления нового контейнера для текста, который мне нужно изменить.

Answer 1

Это старый вопрос, но вы можете сделать простую функцию, подобную этой, чтобы сделать вашу жизнь проще:

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

Answer 2

Проблема с ответом Марка в том, что вы также получаете пустые текстовые узлы. Решение в виде плагина jQuery:

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

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

Answer 3

Простой ответ:

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

Answer 4

Я думаю, что вы ищете .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>

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