DOM操作-range

最新推荐文章于 2020-05-06 16:00:52 发布

baobao214

最新推荐文章于 2020-05-06 16:00:52 发布

阅读量280

点赞数

分类专栏： javascript 文章标签： dom

本文链接：https://blog.csdn.net/baobao214/article/details/50388215

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p id="p1"><b>Hello</b> world!</p>
        <script>
            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);
            range.deleteContents();//删除范围内容
            var fragment = range.extractContents();//移除范围选区并返回
            p1.parentNode.appendChild(fragment);//将范围内容插入文档中

            var span = document.createElement("span");
            span.style.color = "red";
            span.appendChild(document.createTextNode("Inserted text"));
            range.insertNode(span);//在范围选区开始处插入节点


            var range2 = document.createRange();
            range2.selectNode(helloNode);

            var span2 = document.createElement("span");
            span2.style.backgroundColor = "yellow";
            range2.surroundContents(span2);//环绕范围插入内容，此时范围内容格式必须正确

            var range1 = document.createRange()；
            range1.setStart(p1.parentNode,1);
            range1.setEnd(p1.parentNode,2);
            range1.deleteContents();

            range2.detach();//从文档中分离范围，一旦分离就不能恢复使用
            range2 = null;//解除引用 

        </script>
    </body>
</html>

baobao214

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作-range

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> </head> <body> <p id="p1"><b>Hello</b> world!</p> <script> var p1 = document.getElementByI
复制链接

扫一扫

专栏目录