<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 增删改查示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover {
            background-color: #45a049;
        }
        .demo-area {
            border: 1px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        .item {
            background-color: #f0f0f0;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            border-left: 4px solid #4CAF50;
        }
        .result {
            background-color: #e3f2fd;
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>DOM 增删改查示例</h1>
        
        <div class="controls">
            <button data-func="createElement">创建元素</button>
            <button data-func="cloneElement">克隆元素</button>
            <button data-func="deleteElement">删除元素</button>
            <button data-func="findParent">查找父节点</button>
            <button data-func="findChildren">查找子节点</button>
            <button data-func="findNextSibling">查找下一个兄弟节点</button>
            <button data-func="findPrevSibling">查找上一个兄弟节点</button>
        </div>
        
        <div class="demo-area" id="demoArea">
            <div class="item" id="item1">项目 1</div>
            <div class="item" id="item2">项目 2</div>
            <div class="item" id="item3">项目 3</div>
        </div>
        
        <div class="result" id="result"></div>
    </div>
    
    <script>
        // 创建元素
        function createElement() {
            // 创建新元素
            const newItem = document.createElement('div');
            newItem.classList.add('item');
            newItem.innerHTML = '新创建的项目';
            
            // 添加到容器末尾
            const demoArea = document.querySelector('#demoArea');
            demoArea.appendChild(newItem);
            
            showResult('创建了新元素并添加到末尾');
        }
        
        // 克隆元素
        function cloneElement() {
            // 克隆元素
            const item2 = document.querySelector('#item2');
            const clonedItem = item2.cloneNode(true);
            clonedItem.innerHTML = '克隆的项目 2';
            
            // 插入到项目 3 前面
            const demoArea = document.querySelector('#demoArea');
            const item3 = document.querySelector('#item3');
            demoArea.insertBefore(clonedItem, item3);
            
            showResult('克隆了项目 2 并插入到项目 3 前面');
        }
        
        // 删除元素
        function deleteElement() {
            // 删除元素
            const demoArea = document.querySelector('#demoArea');
            const item1 = document.querySelector('#item1');
            
            if (item1) {
                demoArea.removeChild(item1);
                showResult('删除了项目 1');
            } else {
                showResult('项目 1 已不存在');
            }
        }
        
        // 查找父节点
        function findParent() {
            // 查找父节点
            const item2 = document.querySelector('#item2');
            const parent = item2.parentNode;
            
            showResult(`项目 2 的父节点是: ${parent.tagName}`);
        }
        
        // 查找子节点
        function findChildren() {
            // 查找子节点
            const demoArea = document.querySelector('#demoArea');
            const children = demoArea.children;
            let result = '容器的子元素数量: ' + children.length + '<br>';
            
            for (let i = 0; i < children.length; i++) {
                result += `子元素 ${i + 1}: ${children[i].innerHTML}<br>`;
            }
            
            showResult(result);
        }
        
        // 查找下一个兄弟节点
        function findNextSibling() {
            // 查找下一个兄弟节点
            const item2 = document.querySelector('#item2');
            const nextSibling = item2.nextElementSibling;
            
            if (nextSibling) {
                showResult(`项目 2 的下一个兄弟节点是: ${nextSibling.innerHTML}`);
            } else {
                showResult('项目 2 没有下一个兄弟节点');
            }
        }
        
        // 查找上一个兄弟节点
        function findPrevSibling() {
            // 查找上一个兄弟节点
            const item2 = document.querySelector('#item2');
            const prevSibling = item2.previousElementSibling;
            
            if (prevSibling) {
                showResult(`项目 2 的上一个兄弟节点是: ${prevSibling.innerHTML}`);
            } else {
                showResult('项目 2 没有上一个兄弟节点');
            }
        }
        
        // 显示结果
        function showResult(message) {
            const resultDiv = document.querySelector('#result');
            resultDiv.innerHTML = message;
        }
        
        // 绑定事件（使用addEventListener，冒泡模式）
        document.addEventListener('DOMContentLoaded', function() {
            const buttons = document.querySelectorAll('button');
            buttons.forEach(button => {
                button.addEventListener('click', function() {
                    const funcName = this.getAttribute('data-func');
                    window[funcName]();
                });
            });
        });
    </script>
</body>
</html>