JavaScript插入DOM范围的内容无法显示

本意是想用黄色代码突出显示范围选区,可是为何在FireFox中无法显示啊!
<html>
    <head>
        <title>DOM Range Example</title>
        <script type="text/javascript">
            function insertContent() {
                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 = "red";
                                
                oRange.setStart(oHello, 2);
                oRange.setEnd(oWorld, 3);
                oRange.surroundContents(oSpan);
                                
            }
        </script>
    </head>
    <body><p id="p1"><b>Hello</b> World</p>
        <input type="button" value="Insert Content" onclick="insertContent()" />    
        <p><strong>Note:</strong> This example uses DOM ranges and will only work in browsers that support DOM ranges. This example will fail in Internet Explorer.</p>
    
    </body>
</html>代码哪里有问题?还是FF的版本问题。谢谢 

解决方案 »

  1.   


    <html> 
        <head> 
            <title>DOM Range Example </title> 
            <script type="text/javascript"> 
                function insertContent() { 
                    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 = "red"; 
                                    
                    oRange.setStart(oHello, 2); 
                    oRange.setEnd(oHello, 5); 
                    oRange.surroundContents(oSpan); 
                    var oSpan = document.createElement("span"); 
                    oSpan.style.backgroundColor = "red"; 
                    oRange.setStart(oWorld, 0); 
                    oRange.setEnd(oWorld, 3); 
                    oRange.surroundContents(oSpan); 
                                    
                } 
            </script> 
        </head> 
        <body> <p id="p1"><b>Hello</b> World</p> 
            <input type="button" value="Insert Content" onclick="insertContent()" />    
            <p> <strong>Note: </strong> This example uses DOM ranges and will only work in browsers that support DOM ranges. This example will fail in Internet Explorer. </p> 
        
        </body> 
    </html>