Question

I’m trying to add a child element to another element based on a given start offset and length. Example:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

With a given start offset of 6 characters and a length of 20 characters, I want to inner wrap the parent element (p) with a span element.

<p>Lorem <span>ipsum dolor sit amet</span>,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.

Any ideas?

Answer 1

You have a text node, which you can split using splitText: http://jsfiddle.net/VNY2k/.

If you have a text node node and split index n, then node.splitText(n) will modify node to only contain node‘s text up to that index, and return a new text node with the rest of the text.

var node1 = ​$("p").contents()[0];  // whole text node
var node2 = node1.splitText(6);    // right of splitting point #1
var node3 = node2.splitText(20);   // right of splitting point #2
$(node2).wrap("<span>");           // node2 will contain the text
                                   // you want to wrap: right of #1
                                   // and left of #2

Note that you can’t edit the text node itself to contain <span>. A text node really only contains text, and an element (e.g. <span>) is a node per se. As such you need to split the text nodes.