Wstawianie węzła pomiędzy tekstem

Question

Jestem zaznajomiony z wstawianiem węzłów tekstowych po lub przed danym węzłem odniesienia. Ale chciałbym wiedzieć, jak wstawić znacznik między tekstem w danym węźle. Na przykład,

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

Węzeł rozpiętość powinna być umieszczona po N znaków (nie ma potrzeby wyboru użytkownika pozycji kursora) w innym innego węzła. Czy to jest możliwe?

Answer 1

Można sprawdzić właściwość węzłów innerHTML i zmodyfikować. Alternatywnie możesz spojrzeć na kolekcję childNodes i pracować z elementami tam (usuwanie starego węzła tekstowego i wstawianie nowych węzłów w jego miejsce).

Answer 2

Musisz pobrać tekst do zmiennej, a następnie usunąć go z DOM. Podziel go, a następnie wstaw pierwszą część, następnie węzeł zakresu, a następnie drugą część.

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

Właściwym sposobem (za pomocą interfejsów DOM-core) byłoby:

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