1. 实例演示dom增删改的常用方法

代码如下：

 <script>
         /**
       * 1. createElement(ele): 创建新元素, document上调用
       * 2. append(string/ele): 追加到父级最后子节点后,在父节点上调用
       * 3. before(string/ele): 在某元素之前插入节点, 在当前元素上调用
       * 4. after(string/ele): 在某元素之后插入节点, 在当前元素上调用
       * 5. cloneNode(true): 克隆节点(true:包含子节点),在要被克隆的节点上调用
       * 6. replaceChild(ele,pos):  替换子元素,在父级节点上调用
       * 7. remove(ele): 移除子元素, 在父节点上调用
       */
        // 添加新元素UL：
        const ul = document.createElement('ul');
        document.body.append(ul);
        for(let i=0; i<5; i++){
            const li = document.createElement('li');
            li.append('text-'+(i+1));
            ul.append(li);
        }
        console.log(ul);
        // 创建一个新的li：把它追加到第3个li之前
        const li = document.createElement('li');
        li.append('php.cn ');
        li.style.color = 'red';
        // 获取第3个li
        let item = document.querySelector('li:nth-of-type(3)');
        console.log(item);
        // 在第3个li前面添加一个新li：
        item.before(li);
        // 克隆一个li，然后把它追加到原来第3个li的后面
        let clNode = li.cloneNode(true);
        item.after(clNode);
        // replaceChild()替换子元素：
        let targetNode = document.querySelector('li:last-of-type');
        // console.log(targetNode.textContent);
        const newNode = document.createElement('a');
        newNode.href = 'php.cn';
        newNode.append('php中文网');
        ul.replaceChild(newNode,targetNode);
        //移除：
        // 移除第一个li：
        ul.firstElementChild.remove();
        ul.querySelector('li:nth-of-type(4)').remove();
    </script>

效果图展示：

2. 改写留言板案例, 添加自定义样式

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    a{
        color: #000;
        text-decoration: none;
    }
    /* ul li{
        list-style: none;
    } */
    .text{
        width: 20em;
        height: 20em;
        margin: auto;
        background-color: bisque;
        text-align: center;
        overflow:auto;
    }
    .text .lyb2,
    .text h2{
        padding: 1em;
    }
    .text .lyb2{
        text-align: left;
    }
    .text .lyb2 .lists{
        padding-left: 1em;
    }
    .text .lyb2 .lists li{
        padding: 0.5em;
    }
    .text .lyb2 .lists li button{
        margin-left: 0.5em;
        background-color:rgb(10, 43, 174);
        color: #fff;
    }
</style>
<body>
    <div class="text">
        <h2>留言板</h2>
        <!-- <form action="">
            <label for="lyb">留言板：</label>
            <input type="text" onkeydown="addMsg(this)" id="lyb" name="lyb" autofocus placeholder="请输入您的留言信息" />
            <button onclick="addMsg(this)">提交</button>
        </form> -->
        <div class="lyb1">
            <label for="lyb">留言信息：</label>
            <input type="text" onkeydown="addMsg(this)" id="lyb" name="lyb" autofocus placeholder="请输入您的留言信息" />
        </div>
        <div class="lyb2">
            <h3>最新留言：</h3>
            <ol class="lists"></ol>
        </div>
    </div>
    <script>
        function addMsg(ele){
            // console.log(ele);
            // console.log(event);
            // console.log(event.type);
            // console.log(event.key);
            if(event.key === 'Enter'){
                // 添加一个li,为一条信息：
                let li = document.createElement('li');
                li.append(ele.value);               
                if(ele.value.length === 0){
                    alert('留言信息不能为空');
                    ele.focus();
                    return false;
                }
                // let ul = document.querySelector('.lists').append(li);
                let ul = document.querySelector('.lists');
                // ul.after(li);
                // ul.insertAdjacentElement('afterbegin',li)
                // 为每条留言添加一个删除按钮：
                ele.value = ele.value + '<button onclick="del(this.parentNode)">删除</button>';
                // ul.insertAdjacentElement('afterbegin',`<li>${ele.value}</li>`);
                ul.insertAdjacentHTML('afterbegin', `<li>${ele.value}</li>`);
                // 清空输入框：
                ele.value = null;
            }
        }
        function del(ele){
            return confirm('是否删除该信息？') ? ele.remove() : false ;
        }
    </script>
</body>
</html>

效果图展示：

dom增删改的常用方法

1. 实例演示dom增删改的常用方法

2. 改写留言板案例, 添加自定义样式

相关文章