javascript

Chapter 11: DOM Levels 2 and 3
range.setEnd(worldNode, 3);
var fragment = range.cloneContents();
p1.parentNode.appendChild(fragment);
This method is very similar to extractContents() because both return a document fragment. The
main difference is that the document fragment returned by cloneContents() contains clones of
the nodes contained in the range instead of the actual nodes. With this operation, the HTML in the page
is as follows:
< p > < b > Hello < /b > World! < /p >
< b > llo < /b > Wo
It ’ s important to note the splitting of nodes to ensure that a well - formed document isn ’ t produced until
one of these methods is called. The original HTML remains intact right up until the point that the DOM
is modified.
Inserting DOM Range Content
Ranges can be used to remove or clone content, as seen in the previous section, as well as to manipulate
the contents inside of the range. The insertNode() method enables you to insert a node at the
beginning of the range selection. As an example, suppose that you want to insert the following HTML
prior to the HTML used in the previous example:
< span style=”color: red” > Inserted text < /span >
The following code accomplishes this:
var p1 = document.getElementById(“p1”);
var helloNode = p1.firstChild.firstChild;
var worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
var span = document.createElement(“span”);
span.style.color = “red”;
span.appendChild(document.createTextNode(“Inserted text”));
range.insertNode(span);
Running this JavaScript effectively creates the following HTML code:
< p id=”p1” > < b > He < span style=”color: red” > Inserted text < /span > llo < /b > World < /p >
Note that < span > 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 < b > elements because none of the
methods introduced in the previous section was used. You can use this technique to insert helpful
information, such as an image next to links that open in a new window.
355