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

Question

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

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

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

Answer 1

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

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

Answer 2

Правильный способ (с использованием интерфейсов 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));

Answer 3

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