Вставить узел между текстом

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

Before insertion: <p>Lorem dolor</p>
After insertion: <p>Lorem <span>ipsum</span> dolor</p>

Узел диапазона должен быть вставлен после N символов (мне не нужна позиция выбора курсора пользователя) в другом другом узле. Это возможно?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
8
0
5 140
3

Ответы 3

Вы можете проверить свойство innerHTML узлов и изменить его. В качестве альтернативы вы можете посмотреть коллекцию childNodes и поработать там с элементами (удалив старый текстовый узел и вставив на его место новые узлы).

Вам нужно поместить текст в переменную, а затем удалить его из DOM. Разделите его, затем вставьте первую часть, затем узел диапазона, затем вторую часть.

var p = document.getElementById('myParagraph');
var text = p.childNodes[0];

// Split the text
var len = 5
var text1 = text.nodeValue.substr(0, len);
var text2 = text.nodeValue.substr(len);

var span = document.createElement('span');
span.appendChild(document.createTextNode(' dolor'));

// Remove the existing text
p.removeChild(p.childNodes[0]);

// Put the new text in
p.appendChild(document.createTextNode(text1));
p.appendChild(span);
p.appendChild(document.createTextNode(text2));

Ответ с использованием splitText проще и требует меньше строк кода.

Brigham 15.02.2014 20:12

Правильный способ (с использованием интерфейсов DOM-Core):

var p = document.getElementById('myParagraph');
var text = p.childNodes[0];
var at = 5;

// create new span node with content
var span = document.createElement("span");
span.appendChild(document.createTextNode('ipsum'));

// Split the text node into two and add new span
p.insertBefore(span, text.splitText(at));

Другие вопросы по теме