9--Jquery中的DOM操作(插入节点)

其他 2021-02-26 10:13:00 阅读次数: 0
  1. append(content):向每个匹配的元素的内部的结尾处追加内容。
    实例：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>插入节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*创建节点*/
            var $bl=$("<li title='bl'>菠萝</li>");
            /*获取父节点*/
            var $ul=$("#fruit");
            /*在ul元素内部的结束位置添加新建的li元素*/
            $ul.append($bl);
        })
    </script>
</body>
</html>
  1. appendTo(content):将每个匹配的元素节点追加到指定的元素中的内部结尾处。
    实例2：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>插入节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*创建节点*/
            var $bl=$("<li title='bl'>菠萝</li>");
            /*获取父节点*/
            var $ul=$("#fruit");
            /*在ul元素内部的结束位置添加新建的li元素*/
            $bl.appendTo($ul);
        })
    </script>
</body>
</html>
  1. prepend(content): 向每个匹配的元素的内部的开始处追加内容。
    实例3：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>插入节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*创建节点*/
            var $bl=$("<li title='bl'>菠萝</li>");
            /*获取父节点*/
            var $ul=$("#fruit");
            /*在ul元素内部的开始位置添加新建的li元素*/
            $ul.prepend($bl);
        })
    </script>
</body>
</html>
  1. prependTo(content): 将每个匹配的元素节点追加到指定的元素中的内部开始处。
    实例4：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>插入节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*创建节点*/
            var $bl=$("<li title='bl'>菠萝</li>");
            /*获取父节点*/
            var $ul=$("#fruit");
            /*在ul元素内部的开始位置添加新建的li元素*/
            $bl.prependTo($ul);
        })
    </script>
</body>
</html>
  1. after(content):在某个元素之后插入内容
    实例5：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>插入节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*创建节点*/
            var $bl=$("<li title='bl'>菠萝</li>");
            /*获取父节点*/
            var $ul=$("#fruit");
            /*在ul元素外部的结束位置添加新建的li元素*/
            $ul.after($bl);
        })
    </script>
</body>
</html>
  1. before(content):在某个匹配元素的之前插入内容
    实例6：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>插入节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*创建节点*/
            var $bl=$("<li title='bl'>菠萝</li>");
            /*获取父节点*/
            var $ul=$("#fruit");
            /*在ul元素外部的结束位置添加新建的li元素*/
            $bl.insertAfter($ul);
        })
    </script>
</body>
</html>
  1. insertAfter(content):把所有匹配的元素插入到另一个指定元素集合的后面。
    实例7：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>插入节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*创建节点*/
            var $bl=$("<li title='bl'>菠萝</li>");
            /*获取父节点*/
            var $ul=$("#fruit");
            /*在ul元素外部的结束位置添加新建的li元素*/
            $bl.insertBefore($ul);
        })
    </script>
</body>
</html>
  1. inertBefore(content): 把所有匹配的元素插入到另一个指定元素集合的前面。
    实例8：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>插入节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*创建节点*/
            var $bl=$("<li title='bl'>菠萝</li>");
            /*获取父节点*/
            var $ul=$("#fruit");
            /*在ul元素外部的结束位置添加新建的li元素*/
            $ul.before($bl);
        })
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qwy715229258163/article/details/113868142
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022