jquery添加节点几种方式

作者: 程序猿的小生活 | 来源:发表于2022-07-07 11:06 被阅读0次

jquery添加节点几种方式
慕课网jQuery学习笔记（二）
四、jQuery属性操作
JavaScript学习-DOM
jQuery-文档处理
Day23——jQuery
05-jQuery节点操作
js动态append或者html()添加的节点点击事件无效
jQuery节点操作，jQuery插入节点，jQuery删除节点
jQuery插件开发结构

<html>
    <head>
        <script src="js/jquery.js"></script>
        <meta charset="utf-8">
        <title>jquery添加节点几种方式</title>
    </head>
    <body>
        <button id="btn">添加节点一append</button>
        <button id="btn1">添加节点二prepend</button>
        <button id="btn2">添加节点三before</button>
        <button id="btn4">添加节点四appendTo</button>
                <button id="btn3">添加节点三after</button>
        <div id="zs">张三</div>
        <ul id="ul1"></ul>
    </body>
    <script>
        $(function() {
            $("#btn").click(function() {
                  //append 添加到元素最后面 父子元素关系
                var jiedian1 = $("<li>我是新创建的</li>")//创建li标签
                $("#ul1").append(jiedian1);//插入url中
                $("#ul1").append($("#zs"))//将已存在的li标签插入ul1 相当于剪切
            })
            
            $("#btn1").click(function() {
             //prepend 添加到元素最前面 父子元素关系
                var jiedian1 = $("<li>我是新创建的</li>")//创建li标签
                $("#ul1").prepend(jiedian1);//插入url中
                $("#ul1").prepend($("#zs"))//将已存在的li标签插入ul1 相当于剪切
            })
            $("#btn2").click(function() {
             //prepend 添加到元素最前面 兄弟元素关系
                var jiedian1 = $("<li>我是新创建的</li>")//创建li标签
                $("#ul1").before(jiedian1);//将li元素添加到url元素前面 这是兄弟元素关系
                $("#ul1").before($("#zs"))//将已存在的li标签插入ul1前面 相当于剪切 这是兄弟元素关系
            })
            $("#btn3").click(function() {
             //prepend 添加到元素最后面 兄弟元素关系
                var jiedian1 = $("<li>我是新创建的</li>")//创建li标签
                $("#ul1").after(jiedian1);//将li元素添加到url元素后面 这是兄弟元素关系
                $("#ul1").after($("#zs"))//将已存在的li标签插入ul1后面 相当于剪切 这是兄弟元素关系
            })
            $("#btn4").click(function() {
                //子元素 appendTo父元素 吧子元素作为最后一项添加到父元素
                var jiedian1 = $("<li>我是新创建的</li>")
                jiedian1.appendTo($("#ul1"));
              $("#zs")  .appendTo($("#ul1"));
            })

        })
    </script>
</html>