javascript

Chapter 11: DOM Levels 2 and 3
The first method is the simplest to understand and use: deleteContents() . This method simply
deletes the contents of the range from the document. Here is an example:
var p1 = document.getElementById(“p1”);
var helloNode = p1.firstChild.firstChild;
var worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);
range.setSend(worldNode, 3);
range.deleteContents();
Executing this code results in the following HTML being shown on the page:
< p > < b > He < /b > rld! < /p >
Since the range selection process altered the underlying DOM structure to remain well formed, the
resulting DOM structure is well formed even after removing the contents.
extractContents() is similar to deleteContents() in that it also removes the range selection from
the document. The difference is that extractContents() returns the range ’ s document fragment as the
function value. This allows you to insert the contents of the range somewhere else. Here is an example:
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 fragment = range.extractContents();
p1.parentNode.appendChild(fragment);
In this example, the fragment is extracted and added to the end of the document ’ s < body > element.
(Remember, when a document fragment is passed into appendChild() , only the fragment ’ s children are
added, not the fragment itself.) The resulting HTML is as follows:
< p > < b > He < /b > rld! < /p >
< b > llo < /b > Wo
Another option is to leave the range in place but create a clone of it that can be inserted elsewhere in the
document by using cloneContents() , as shown in this example:
var p1 = document.getElementById(“p1”);
var helloNode = p1.firstChild.firstChild;
var worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);
354