Изменение текста в div с дочерними элементами через jQuery

Быстрый ответ

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

let parent = document.querySelector('#parent'); // Тут указывается целевой элемент
let textNode = Array.from(parent.childNodes).find(n => n.nodeType === 3); // Поиск первого текстового узла
if (textNode) textNode.nodeValue = 'Новый текст'; // Обновление его текстового содержимого

В этом примере мы обращаемся к элементу с идентификатором #parent, выбираем первый текстовый узел (nodeType == 3), а затем изменяем его значение nodeValue.

Сохранение иерархии родитель-дети: JavaScript подход

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

let parent = document.querySelector('#parent'); // Элемент-родитель
let children = [...parent.childNodes].filter(n => n.nodeType !== 3); // Выделение дочерних элементов

// Временное удаление дочерних узлов
while (parent.firstChild) {
  parent.removeChild(parent.firstChild);
}

// Обновление текста
parent.appendChild(document.createTextNode('Новый текст'));

// Возвращение дочерних узлов на их место
children.forEach(child => {
  parent.appendChild(child);
});

В данном примере сначала осуществляется временное удаление дочерних элементов, затем происходит замена текста, после чего дочерние элементы возвращаются обратно.

Изоляция текстового узла: хитрости jQuery

Замена всех текстовых узлов

Для замены всех текстовых узлов в jQuery сочетание .contents() и .filter() будут вам в помощь:

$('#parent').contents().filter(function() {
  return this.nodeType === 3;
}).replaceWith('Новый текст');

Подробнее об этом расскажет наш спикер на видео

Замена только первого текстового узла

Чтобы изменить только первый текстовый узел, используйте метод .first():

$('#parent').contents().filter(function() {
  return this.nodeType === 3;
}).first().replaceWith('Новый текст');

Таким образом, вы можете наблюдать за текстовым контентом, не затрагивая вложенные элементы.

Визуализация

Представьте себе элемент в виде матрёшки. Цель — изменить внешний слой самой большой куклы, не затрагивая меньшие:

До вмешательства:
🪆: Большая кукла (с текстом)
  🪆: Меньшая кукла
    🪆: Совсем маленькая кукла

Использование свойства textContent изменит текст на всех матрёшках:

element.textContent = 'Новый текст';

В результате, большая матрёшка получает новый текст, однако меньшие куклы исчезают!

Но если использовать .firstChild.nodeValue:

element.firstChild.nodeValue = 'Новый текст';

После очевидного решения:
🪆: Большая кукла (с 'Новым текстом')
  🪆: Меньшая кукла (остаётся такой же)
    🪆: Совсем маленькая кукла (также без изменений)

Таким образом меняется только внешний слой матрёшки, не затрагивая меньшие.

Контроль над текстом: современные методы JavaScript

Гибкость с помощью соседа

Максимально простой подход с использованием nextSibling в JavaScript:

let node = document.querySelector('#parent').firstChild;
while(node) {
  if(node.nodeType === 3) {
    node.nodeValue = 'Новый текст'; // Обновление текста
    break;
  }
  node = node.nextSibling; // Переход к следующему узлу
}

Синтаксис ES6

Используйте современный синтаксис for...of для достижения грациозности кода:

for (let node of document.querySelector('#parent').childNodes) {
  if (node.nodeType === 3) {
    node.nodeValue = 'Новый текст'; // Применение нового синтаксиса
    break;
  }
}

Возможные трудности и пути их преодоления

Версия jQuery

Убедитесь, что версия jQuery, которую вы используете, подходит для ваших задач:

console.log('Версия jQuery:', $.fn.jquery); // Проверка версии

Нужные и ненужные текстовые узлы

Удалите нежелательные текстовые узлы:

$('#parent').contents().filter(function() {
  return !(this.nodeType === 3 && !/\S/.test(this.nodeValue)); // Удаление ненужных узлов
}).remove();

Цель — очистить элемент, оставив только нужные узлы.

Порядок следование дочерних элементов

Следите за порядком следования дочерних элементов при их манипулировании:

Array.from(parent.childNodes).forEach((child, index) => {
  console.log(`Дочерний узел № ${index}:`, child); // Проверка порядка следования
});

Полезные материалы

1. .text() | jQuery API Documentation — Описание метода jQuery .text(), позволяющего изменять текст без влияния на дочерние элементы.
2. Node: textContent property – Web APIs | MDN — Справочные данные по свойству textContent.
3. javascript – Sanitize/Rewrite HTML on the Client Side – Stack Overflow — Обсуждение безопасных способов замены текста на стороне клиента.
4. ::before / ::after | CSS-Tricks – CSS-Tricks — Декорирование элементов с использованием ::before и ::after.
5. Node: replaceChild() method – Web APIs | MDN — Руководство по применению метода replaceChild.
6. HTMLElement: innerText property – Web APIs | MDN — Сравнение свойств innerText и textContent и рекомендации по их использованию.