Insertar un nodo entre texto

Question

Estoy familiarizado con la inserción de nodos de texto después o antes de un nodo de referencia determinado. Pero, me gustaría saber cómo insertar una etiqueta entre el texto en un nodo dado. Por ejemplo,

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

El nodo lapso debe insertarse después de N caracteres (No necesito posición de selección cursor del usuario) dentro de otro otro nodo. ¿Es eso posible?

Answer 1

Puede verificar una propiedad de nodos innerHTML y modificar eso. De forma alternativa, puede consultar la colección childNodes y trabajar con elementos allí (eliminar el nodo de texto anterior e insertar nuevos nodos en su lugar).

Answer 2

Necesita obtener el texto en una variable y luego eliminarlo del DOM. Dividirlo, luego inserte la primera parte, luego su nodo span y luego la segunda parte.

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 3

La forma correcta (utilizando las interfaces DOM-Core) sería:

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