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

清枫草塘 2009-08-08 12:24:50

本意是想用黄色代码突出显示范围选区,可是为何在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的版本问题。谢谢

...全文

118 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

hookee 2009-08-08

打赏
举报



<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>