jQuery 自学笔记（四）——— 动态创建元素、添加清空移除克隆节点、获取表单内容

亦凉 2023-10-11 16:54 5阅读 0赞

#### 文章目录 ####

*   *  一、动态创建元素
     *  二、jQuery 添加结点的几种方式
     *   *  2.1 append()
         *  2.2 prepend()
         *  2.3 after()
         *  2.4 before()
         *  2.5 appendTo()
     *  三、清空节点与移除节点
     *  四、克隆节点
     *  五、val() 方法：设置/获取表单内容

--------------------

### 一、动态创建元素 ###

1、原生 js 创建节点

`document.createElement(); 注：创建元素节点`  
`document.createTextNode(); 注：创建文本节点`

2、jQuery 创建节点

1.  **html()：设置或者获取内容**
    
     *  获取内容：html()方法不给参数
     *  设置内容：html()方法给参数
    
        $('#btnHtml1').click(function () {
              
        	//1. 获取内容，获取到元素的所有内容
        	console.log($('#div1').html());
        	//2. 设置内容，会把原来的内容给覆盖，如果设置的内容中包括标签，会把标签给解析出来的
        	$('#div1').html('我是设置的内容<a href="https://www.baidu.com">百度搜索</a>');
        })
2.  **$()**  
    确实能创建元素，但创建元素只存在于内存中，如果要在页面上显示，就要追加 append，**不会覆盖**。
    
        $('#btn1').click(function () {
              
        	var $link = $('<a href="https://www.baidu.com">百度搜索</a>');
        	$('#div1').append($link);//追加
        })

--------------------

### 二、jQuery 添加结点的几种方式 ###

#### 2.1 append() ####

**语法：**`父元素.append(子元素); 作为最后一个子元素添加`

1.  新创建一个节点，添加到父元素的尾部
    
        var liNew = $("<li>我是新创建的li标签</li>");
        $('#ul').append(liNew);
2.  若该节点已经存在，则剪切后作为最后一个子元素添加到父元素的尾部
    
        var li3 = $('#li3');
        $('#ul').append(li3);
    
    ![在这里插入图片描述][5152234ff1fb40f1ac6be243343dea64.gif]

--------------------

#### 2.2 prepend() ####

**语法：** `父元素.prepend(子元素); 作为第一个子元素添加.`

和 append 效果正好相反

1.  新创建一个节点，添加到父元素的首部
2.  若该节点已经存在，则剪切后作为最后一个子元素添加到父元素的首部
    
    ![在这里插入图片描述][64b27c8127ae4c9791faca52caa78117.gif]

--------------------

#### 2.3 after() ####

**语法：** `元素A.before(元素B); 把 元素B 插入到 元素A 的后面，作为兄弟元素添加`

1.  新创建一个元素，作为兄弟元素添加到兄弟元素之后
2.  若该元素已经存在，则剪切后作为兄弟元素添加到兄弟元素之后
    
        $('#afterBtn1').click(function (){
              
            var li2_3 = $('<li>我是新建的li</li>');
            $('#li3').after(li2_3);//加到第 3 个 li 元素之后
        })
        $('#afterBtn2').click(function (){
              
            var li3 = $('#li3');
            $('#li5').after(li3);//将 id 为 li3 的元素添加到 id 为 li5 的元素之后
        })
    
    ![在这里插入图片描述][468e48bef2874490a9df9bbda001f41a.gif]

--------------------

#### 2.4 before() ####

**语法：** `元素A.before(元素B); 把 元素B 插入到 元素A 的前面，作为兄弟元素添加`

1.  新创建一个元素，作为兄弟元素添加到兄弟元素之前
2.  若该元素已经存在，则剪切后作为兄弟元素添加到兄弟元素之前  
    ![在这里插入图片描述][67a8c10a32754716b36eb24871057ff9.gif]

--------------------

#### 2.5 appendTo() ####

**语法：**`content.appendTo(selector); 在被选元素的结尾插入 HTML 元素`

$('#btnAppendTo').click(function () {
        
       var $liNew = $("<li>我是新创建的li标签</li>");
       $liNew.appendTo($('#ul')); //在 ul 列表中添加 li 标签
    })

![在这里插入图片描述][373551b6f95148698224b4b18ba98b43.gif]

--------------------

### 三、清空节点与移除节点 ###

1.  清空节点： empty()  
    `$('#ul').html(); 不推荐使用，有可能在造成内存泄露，不安全`  
    `$('#ul').empty(); 推荐使用 ul标签还在，ul标签里面的内容被清空`
2.  移除节点：remove()
    
    `$('#li3').remove(); 实际上调用了父级元素删除自己 的元素机制`  
    `$('#li3').parent().remove(); ul标签不在`

--------------------

### 四、克隆节点 ###

jQuery中克隆节点，使用 `clone()`。**只存在内存中**，如果要在页面上显示，就要追加到页面上。  
**注意：** clone() 方法参数无论是 true 还是 false ，都会克隆到后代节点的。  
**区别：**

1.  clone() 方法参数是 true 会把事件（例如：点击事件）一起克隆
2.  clone() 方法参数是 false 会把事件（例如：点击事件）不会克隆

默认不写参数是false

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <style>样式省略...</style>
    </head>
    <body>
    <div id="text">
        <input type="button" value="方法参数 false" id="clone1"/> 
        <input type="button" value="方法参数 true" id="clone2"/>
    </div>
    <br>
    <div id="div1">
        <span>span1</span>
    </div>
    </body>
    </html>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
          
            //给id位 div1 的 div 标签添加点击事件
            $('#div1').click(function () {
          
                alert('我被点击了')
            })
            $('#clone1').click(function () {
          
                var $cloneDiv = $('#div1').clone(false);
                //修改克隆节点的id
                $cloneDiv.attr('id','div2');
                //把克隆的节点追加到body中
                $('body').append($cloneDiv);
            })
            $('#clone2').click(function () {
          
                var $cloneDiv = $('#div1').clone(true);
                $cloneDiv.attr('id','div3');
                $('body').append($cloneDiv);
            })
        });
    </script>

![在这里插入图片描述][fdb647277d544d10be246dbcfe3ef018.gif]

--------------------

### 五、val() 方法：设置/获取表单内容 ###

*  原生 js 是通过 value 属性来获取或者设置表单元素的值.
 *  jQuery中用 val()，设置或者获取表单元素的值的

**5.1 获取 value**  
val() 方法不给参数  
如：`console.log($('#txt').val()); //控制台打印 id 为 txt 标签的 value 值`

**5.2 设置 value**  
给参数就是设置  
`$('#txt').val('新设置的内容'); //给 id 为 txt 标签赋予新设置的 value 值`

[5152234ff1fb40f1ac6be243343dea64.gif]: https://img-blog.csdnimg.cn/5152234ff1fb40f1ac6be243343dea64.gif
[64b27c8127ae4c9791faca52caa78117.gif]: https://img-blog.csdnimg.cn/64b27c8127ae4c9791faca52caa78117.gif
[468e48bef2874490a9df9bbda001f41a.gif]: https://img-blog.csdnimg.cn/468e48bef2874490a9df9bbda001f41a.gif
[67a8c10a32754716b36eb24871057ff9.gif]: https://img-blog.csdnimg.cn/67a8c10a32754716b36eb24871057ff9.gif
[373551b6f95148698224b4b18ba98b43.gif]: https://img-blog.csdnimg.cn/373551b6f95148698224b4b18ba98b43.gif
[fdb647277d544d10be246dbcfe3ef018.gif]: https://img-blog.csdnimg.cn/fdb647277d544d10be246dbcfe3ef018.gif