Insert content into range

Insert content into range

1. When a range is created, internally it creates a document fragment node onto which all the nodes in the selection are attached.
   • var range = document.createRange();
2. We can set a range with more precision by selecting only parts of nodes using the following.
   • Range.setStart(refNode, startOffset)
     • refNode - the node that starts the selection.
     • startOffset - the number of chars skipped before the range starts if it's a text node; otherwise it's index of the first child node in the range.
   • Range.setEnd(refNode, endOffset)
     • refNode - the node that ends the selection.
     • endOffset - the number of chars skipped before the range ends if it's a text node; otherwise it's index of the last child node in the range.
3. With the same document fragment created, we can also insert content into range using a couple different methods.
   • Range.insertNode(refNode) - inserts a node at the beginning of the selection. refNode is the node to be inserted.
   • Range.surroundContents(refNode) - surrounds the range with the node specified in refNode.