Einfügen eines Knotens zwischen Text

Question

Ich bin vertraut mit dem Einfügen von Textknoten nach oder vor einem bestimmten Referenzknoten. Aber ich würde gerne wissen, wie man ein Tag zwischen Text in einem bestimmten Knoten einfügen kann. Zum Beispiel

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

Die Spanne Knoten muss nach N Zeichen eingefügt werden (I brauchen nicht Cursor Auswahlposition des Benutzers) innerhalb eines anderen einen anderen Knoten. Ist das möglich?

Answer 1

Sie können eine Knoten innerHTML Eigenschaft überprüfen und ändern. Alternativ können Sie sich auch die childNodes Sammlung ansehen und dort mit Elementen arbeiten (den alten Textknoten löschen und an seiner Stelle neue Knoten einfügen).

Answer 2

Sie müssen den Text in eine Variable und dann aus dem DOM entfernen. Teilen Sie es, fügen Sie dann den ersten Teil ein, dann den Span-Knoten und dann den zweiten Teil.

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

Der richtige Weg (mit DOM-Core-Schnittstellen) wäre:

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