Every time I attempt to utilize a range, an error message appears in the console:
Uncaught IndexSizeError: Failed to execute 'setEnd' on 'Range': The offset 2 is larger than or equal to the node's length (0).
This is the script I am using:
<script type="text/javascript">
function gotMark() {
var range = document.createRange();
var startNode = document.getElementById("dividTeste1").firstChild;
range.setStart(startNode, 0);
range.setEnd(startNode, 2);
var newNode = document.createElement("span");
range.surroundContents(newNode);
}
</script>
And here is a snippet of the page:
<div class="ui-block-a" id="divid" value="div1">
<div style="background-color: black; color: white; padding: 20px;" id="divid2">
<h2>London</h2>
<p id="dividTeste1">London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
</div>
<div style="background-color: black; color: white; padding: 20px;" id="divid2">
<h2>London</h2>
<p id="dividTeste2">London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
</div>
</div>
<input type="button" value="Marcar com range" onClick="gotMark()"
id="marcarconranger12" />
I made an effort to adhere to the guidance provided in dom range.setStart / setEnd for selecting the start and end positions.