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>

效果图展示：

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

VScode

2022-07-04 19:45:45