第5章：jQuery DOM 增删改（进阶操作）

5.1 插入DOM元素（在指定位置添加新元素）

append()：在元素内部末尾插入

作用：在目标元素内部的末尾插入新元素
语法：$(selector).append(content)

示例：

javascript

// 在div内部末尾插入p元素
$('#myDiv').append('<p>新的段落</p>');

// 在多个元素内部末尾插入相同内容
$('.item').append('<span> - 新内容</span>');

prepend()：在元素内部开头插入

作用：在目标元素内部的开头插入新元素
语法：$(selector).prepend(content)

示例：

javascript

// 在div内部开头插入h2元素
$('#myDiv').prepend('<h2>标题</h2>');

// 在列表内部开头插入新的列表项
$('ul').prepend('<li>新的列表项</li>');

after()：在元素外部后面插入

作用：在目标元素的外部后面插入新元素
语法：$(selector).after(content)

示例：

javascript

// 在div外部后面插入p元素
$('#myDiv').after('<p>在div后面</p>');

// 在按钮后面插入提示信息
$('button').after('<span>点击按钮</span>');

before()：在元素外部前面插入

作用：在目标元素的外部前面插入新元素
语法：$(selector).before(content)

示例：

javascript

// 在div外部前面插入p元素
$('#myDiv').before('<p>在div前面</p>');

// 在标题前面插入导航
$('h1').before('<nav>导航</nav>');

5.2 删除DOM元素（移除页面元素）

remove()：删除元素本身及所有子元素

作用：删除目标元素及其所有子元素
语法：$(selector).remove()

示例：

javascript

// 删除id为myDiv的元素
$('#myDiv').remove();

// 删除所有class为item的元素
$('.item').remove();

empty()：清空元素内部所有子元素（保留自身）

作用：清空目标元素内部的所有子元素，但保留元素本身
语法：$(selector).empty()

示例：

javascript

// 清空div内部的所有内容
$('#myDiv').empty();

// 清空列表内部的所有列表项
$('ul').empty();

5.3 替换DOM元素（替换页面已有元素）

replaceWith()：用新元素替换目标元素

作用：用新元素替换目标元素
语法：$(selector).replaceWith(content)

示例：

javascript

// 用p元素替换div元素
$('#myDiv').replaceWith('<p>替换后的内容</p>');

// 用按钮替换链接
$('a').replaceWith('<button>点击我</button>');

replaceAll()：用目标元素替换指定元素

作用：用目标元素替换所有匹配的指定元素
语法：$(content).replaceAll(selector)

示例：

javascript

// 用p元素替换所有div元素
$('<p>替换后的内容</p>').replaceAll('div');

// 用span元素替换所有h2元素
$('<span>新标题</span>').replaceAll('h2');

5.4 克隆DOM元素（复制元素）

clone()：克隆元素，可选择是否复制事件

作用：克隆目标元素，可选是否复制元素上的事件处理
语法：
- 只克隆元素结构：$(selector).clone()
- 克隆元素结构和事件：$(selector).clone(true)

示例：

javascript

// 克隆元素并插入到原元素后面
const $clone = $('#myElement').clone();
$('#myElement').after($clone);

// 克隆元素及其事件
const $cloneWithEvents = $('#myButton').clone(true);
$('#myButton').after($cloneWithEvents);

5.5 实操案例：动态添加、删除、替换页面元素，实现动态布局

案例：动态元素管理

HTML结构：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery DOM增删改练习</title>
    <style>
        .container { 
            width: 400px; 
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
        }
        .item { 
            padding: 10px;
            margin: 10px 0;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
        }
        .item button { 
            margin-left: 10px;
            font-size: 12px;
        }
        input { 
            padding: 5px;
            margin-right: 10px;
        }
        button { 
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>动态元素管理</h2>
        <div class="controls">
            <input type="text" id="itemText" placeholder="输入内容">
            <button id="addBtn">添加元素</button>
            <button id="emptyBtn">清空所有</button>
        </div>
        <div id="itemList">
            <div class="item">
                项目1 <button class="deleteBtn">删除</button>
            </div>
            <div class="item">
                项目2 <button class="deleteBtn">删除</button>
            </div>
        </div>
    </div>
    
    <script>
        $(document).ready(function() {
            // 添加元素
            $('#addBtn').click(function() {
                const text = $('#itemText').val();
                if (text) {
                    const newItem = $('<div class="item">' + text + ' <button class="deleteBtn">删除</button></div>');
                    $('#itemList').append(newItem);
                    $('#itemText').val('');
                }
            });
            
            // 删除元素（事件委托）
            $('#itemList').on('click', '.deleteBtn', function() {
                $(this).parent('.item').remove();
            });
            
            // 清空所有元素
            $('#emptyBtn').click(function() {
                $('#itemList').empty();
            });
            
            // 双击替换元素
            $('#itemList').on('dblclick', '.item', function() {
                const originalText = $(this).text().trim().replace('删除', '');
                const input = $('<input type="text" value="' + originalText + '" />');
                const saveBtn = $('<button>保存</button>');
                const cancelBtn = $('<button>取消</button>');
                
                const editDiv = $('<div class="item"></div>')
                    .append(input)
                    .append(saveBtn)
                    .append(cancelBtn);
                
                $(this).replaceWith(editDiv);
                
                // 保存修改
                saveBtn.click(function() {
                    const newText = input.val();
                    if (newText) {
                        const newItem = $('<div class="item">' + newText + ' <button class="deleteBtn">删除</button></div>');
                        editDiv.replaceWith(newItem);
                    }
                });
                
                // 取消修改
                cancelBtn.click(function() {
                    const originalItem = $('<div class="item">' + originalText + ' <button class="deleteBtn">删除</button></div>');
                    editDiv.replaceWith(originalItem);
                });
            });
        });
    </script>
</body>
</html>

测试步骤：

保存文件为dom-modify.html
用浏览器打开该文件
在输入框中输入内容，点击"添加元素"按钮
点击元素后的"删除"按钮删除元素
点击"清空所有"按钮清空所有元素
双击元素进行编辑，修改内容后点击"保存"，或点击"取消"放弃修改

案例解析：

添加元素：使用append()方法在列表末尾添加新元素
删除元素：使用remove()方法删除元素，使用事件委托处理动态添加的元素
清空元素：使用empty()方法清空所有元素
替换元素：使用replaceWith()方法替换元素，实现编辑功能

新手易错点：

事件委托：
- 对于动态添加的元素，需要使用事件委托来绑定事件
- 使用$(parent).on('event', 'selector', function() {})格式
克隆元素：
- 默认情况下，clone()只克隆元素结构，不克隆事件
- 如果需要克隆事件，使用clone(true)

链式调用：

可以链式调用多个DOM操作方法

javascript

$('#myElement')
    .empty()
    .append('<p>新内容</p>')
    .css('background-color', 'yellow');

性能考虑：
- 对于大量DOM操作，建议先构建DOM片段，再一次性插入
- 避免在循环中频繁操作DOM

第5章：jQuery DOM 增删改（进阶操作） ​

5.1 插入DOM元素（在指定位置添加新元素） ​

append()：在元素内部末尾插入 ​

prepend()：在元素内部开头插入 ​

after()：在元素外部后面插入 ​

before()：在元素外部前面插入 ​

5.2 删除DOM元素（移除页面元素） ​

remove()：删除元素本身及所有子元素 ​

empty()：清空元素内部所有子元素（保留自身） ​

5.3 替换DOM元素（替换页面已有元素） ​

replaceWith()：用新元素替换目标元素 ​

replaceAll()：用目标元素替换指定元素 ​

5.4 克隆DOM元素（复制元素） ​

clone()：克隆元素，可选择是否复制事件 ​

5.5 实操案例：动态添加、删除、替换页面元素，实现动态布局 ​

案例：动态元素管理 ​

HTML结构： ​

测试步骤： ​

案例解析： ​

新手易错点： ​

第5章：jQuery DOM 增删改（进阶操作）

5.1 插入DOM元素（在指定位置添加新元素）

append()：在元素内部末尾插入

prepend()：在元素内部开头插入

after()：在元素外部后面插入

before()：在元素外部前面插入

5.2 删除DOM元素（移除页面元素）

remove()：删除元素本身及所有子元素

empty()：清空元素内部所有子元素（保留自身）

5.3 替换DOM元素（替换页面已有元素）

replaceWith()：用新元素替换目标元素

replaceAll()：用目标元素替换指定元素

5.4 克隆DOM元素（复制元素）

clone()：克隆元素，可选择是否复制事件

5.5 实操案例：动态添加、删除、替换页面元素，实现动态布局

案例：动态元素管理

HTML结构：

测试步骤：

案例解析：

新手易错点：