Professional JavaScript For Web Developers

Chapter 10
The following code accomplishes this:
var oP1 = document.getElementById(“p1”);
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement(“span”);
oSpan.style.color = “red”;
oSpan.appendChild(document.createTextNode(“Inserted text”));
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.insertNode(oSpan);
Running this JavaScript effectively creates the following HTML code:
HeInserted textllo World
Note that the is inserted just before the llo in Hello, which is the first part of the range selection.
Also note that the original HTML didn’t add or remove elements because none of the methods
introduced in the previous section were used. You can use this technique to insert helpful information,
such as an image next to links that open in a new window.
Along with inserting into the range, it is possible to insert content surrounding the range by using the
surroundContents() method. This method accepts one parameter, which is the node that surrounds
the range contents. Behind the scenes, the following steps are taken:
1. The contents of the range are extracted (similar to extractContents()).
2. The given node is inserted into the position in the original document where the range was.
3. The contents of the document fragment is added to the given node.
This sort of functionality is useful online to highlight certain words in a Web page, like this:
var oP1 = document.getElementById(“p1”);
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement(“span”);
oSpan.style.backgroundColor = “yellow”;
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.surroundContents(oSpan);
The previous code highlights the range selection with a yellow background.
326