为什么页面显示能动态添加到元素而打印却没有添加上_地推的博客-爱代码爱编程

2022-10-03 分类: javascript 前端 css
问题遇到的现象和发生背景
用代码块功能插入代码，请勿粘贴截图
我想要达到的结果
<!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>Document</title>
 
    <style>
        .home {
            position: absolute;
            display: inline-block;
            top: 30%;
            left: 40%;
            background-color: rgb(236, 236, 236);
            padding: 20px;
            border: 1px dashed black;
            border-radius: 3px;
        }
 
        textarea {
            box-sizing: border-box;
            width: 350px;
            height: 50px;
            outline: none;
            resize: none;
            margin-bottom: 10px;
        }
 
        .item {
            box-sizing: border-box;
            position: relative;
            border: 1px solid rgb(102, 102, 102);
            border-radius: 3px;
            height: 30px;
            width: 350px;
            background-color: rgb(255, 255, 255);
            margin-bottom: 5px;
        }
 
        .changeBlue {
            box-shadow: 0 0 10px rgb(109, 99, 243);
        }
 
        .item button {
            position: absolute;
            right: 3px;
            top: 50%;
            height: 20px;
            margin-top: -10px;
            width: 60px;
            margin-right: 3px;
            border: 0px;
            border-radius: 3px;
            background-color: red;
            transition: 0.3s;
            opacity: 0;
        }
 
        .item span {
            line-height: 30px;
        }
 
        .item input {
            line-height: 30px;
        }
 
        .footer {
            margin-top: 10px;
            margin-left: 0px;
        }
    </style>
</head>
 
<body>
    <div class="home">
        <div class="title">
            <textarea class="inp"></textarea>
        </div>
        <div class="list">
            <div class="item">
                <input type="checkBox">
                <span>吃饭</span>
                <button class="del">删除</button>
            </div>
            <div class="item">
                <input type="checkbox">
                <span>睡觉</span>
                <button class="del">删除</button>
            </div>
            <div class="item">
                <input type="checkBox">
                <span>上课</span>
                <button class="del">删除</button>
            </div>
        </div>
        <div class="footer">
            <input type="checkbox" name="" id="">
            <span class="total">已选0个</span>
            <span>/</span>
            <span class="sum">总共0个</span>
        </div>
    </div>
 
    <script>
        let itemList = Array.from(document.querySelectorAll('.item'))
        let inp = document.querySelector('.inp')
        let list = null
        let total = 0;
        let sum = 0;
        fun()
        inp.onkeydown = function (e) {
            if (e.keyCode == '13') {
                if (this.value.trim() == '') {
                    alert('输入不能为空')
                    event.preventDefault()
                } else {
                    let newEle = document.createElement('div')
                    newEle.className = 'item'
                    newEle.innerHTML = `
                    <input type="checkBox">
                    <span>${this.value}</span>
                    <button class="del">删除</button>`
                    console.log(newEle);
                    this.parentNode.appendChild(newEle)
                    itemList = Array.from(document.querySelectorAll('.item'))
                    fun()
                    this.value = ''
                    event.preventDefault()
                }
 
            }
        }
        function fun() {
            for (let i = 0; i < itemList.length; i++) {
                itemList[i].onmouseenter = function (e) {
                    for (let j = 0; j < itemList.length; j++) {
                        if (i == j) {
                        } else {
                            itemList[j].querySelector('.del').style.opacity = '0'
                        }
                    }
                    let ele = document.querySelector('.changeBlue')
                    if (ele == null) {
                    } else {
                        ele.classList.remove('changeBlue')
                    }
                    this.classList.add('changeBlue')
                    this.querySelector('.del').style.opacity = '1'
                }
                itemList[i].onmouseleave = function () {
                    this.classList.remove('changeBlue')
                }
            }
            for (let i = 0; i < itemList.length; i++) {
                itemList[i].onclick = function (e) {
                    if (e.target.tagName == 'BUTTON') {
                        e.target.parentNode.parentNode.removeChild(e.target.parentNode)
                    }
                    list=document.querySelector('.list')
                    sum = document.querySelectorAll('.item').length
                    total = document.querySelectorAll('input').length-1
                    console.log(sum, total);
                    console.log(list);
                }
 
            }
            sum = document.querySelectorAll('.item').length
            total = document.querySelectorAll('input').length-1
            console.log(sum, total);
            console.log(document.querySelector('.list'));
        }
    </script>
</body>
 
</html>
 
![img](https://img-blog.csdnimg.cn/img_convert/76006981d004a7849cf3560e7f0b6bb5.png)
 
 
 
 
![img](https://img-blog.csdnimg.cn/img_convert/552cdf11e1a862a727ff33213aea1824.png)
 
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nB7lmbIc-1664799662172)(https://img-mid.csdnimg.cn/release/static/image/mid/ask/248299897466169.png "#left")]
 
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kOVURMiu-1664799662173)(https://img-mid.csdnimg.cn/release/static/image/mid/ask/984799897466190.png "#left")]
 
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RXez7TWp-1664799662174)(https://img-mid.csdnimg.cn/release/static/image/mid/ask/040980997466177.png "#left")]
[.](https://blog.csdn.net/douyinbuwen/category_12030798.html)[.](https://blog.csdn.net/douyinbuwen/article/month/1135/12800/14472)[.](https://blog.csdn.net/douyinbuwen/article/month/1784/16144/17816)[.](https://blog.csdn.net/douyinbuwen/article/month/1410/19488/21160)[.](https://blog.csdn.net/douyinbuwen/article/month/1036/22832/24504)[.](https://blog.csdn.net/douyinbuwen/article/month/1685/26176/27848)[.](https://blog.csdn.net/douyinbuwen/article/month/1311/29520/31192)[.](https://blog.csdn.net/douyinbuwen/article/month/1960/96/1768)[.](https://blog.csdn.net/douyinbuwen/article/month/1586/3440/5112)[.](https://blog.csdn.net/douyinbuwen/article/month/1212/6784/8456)[.](https://blog.csdn.net/douyinbuwen/article/month/1861/10128/11800)[.](https://blog.csdn.net/douyinbuwen/article/month/1487/13472/15144)[.](https://blog.csdn.net/douyinbuwen/article/month/1081/16816/18488)[.](https://blog.csdn.net/douyinbuwen/article/month/1730/20160/21832)[.](https://blog.csdn.net/douyinbuwen/article/month/1356/23503/25175)[.](https://blog.csdn.net/douyinbuwen/article/month/2005/26847/28519)[.](https://blog.csdn.net/douyinbuwen/article/month/1631/30191/31863)[.](https://blog.csdn.net/douyinbuwen/article/month/1257/767/2439)[.](https://blog.csdn.net/douyinbuwen/article/month/1906/4111/5783)[.](https://blog.csdn.net/douyinbuwen/article/month/1532/7455/9127)[.](https://blog.csdn.net/douyinbuwen/article/month/1158/10799/12471)[.](https://blog.csdn.net/douyinbuwen/article/month/1807/14143/15815)[.](https://blog.csdn.net/douyinbuwen/article/month/1433/17487/19159)[.](https://blog.csdn.net/douyinbuwen/article/month/1059/20831/22503)[.](https://blog.csdn.net/douyinbuwen/article/month/1708/24175/25847)[.](https://blog.csdn.net/douyinbuwen/article/month/1334/27519/29191)[.](https://blog.csdn.net/douyinbuwen/article/month/1983/30863/32535)[.](https://blog.csdn.net/douyinbuwen/article/month/1609/1439/3111)[.](https://blog.csdn.net/douyinbuwen/article/month/1235/4783/6455)[.](https://blog.csdn.net/douyinbuwen/article/month/1884/8127/9799)[.](https://blog.csdn.net/douyinbuwen/article/month/1510/11471/13143)[.](https://blog.csdn.net/douyinbuwen/article/month/1136/14815/16487)[.](https://blog.csdn.net/douyinbuwen/article/month/1753/18159/19831)[.](https://blog.csdn.net/douyinbuwen/article/month/1379/21503/23279)[.](https://blog.csdn.net/douyinbuwen/article/month/1103/25265/26519)[.](https://blog.csdn.net/douyinbuwen/article/month/1022/28191/29862)[.](https://blog.csdn.net/douyinbuwen/article/month/1175/31534/438)[.](https://blog.csdn.net/douyinbuwen/article/month/1511/2110/3782)[.](https://blog.csdn.net/douyinbuwen/article/month/1742/5454/7126)[.](https://blog.csdn.net/douyinbuwen/article/month/1367/8798/10470)[.](https://blog.csdn.net/douyinbuwen/article/month/2016/12142/13814)[.](https://blog.csdn.net/douyinbuwen/article/month/1642/15486/17158)[.](https://blog.csdn.net/douyinbuwen/article/month/1268/18830/20502)[.](https://blog.csdn.net/douyinbuwen/article/month/1917/22174/23846)[.](https://blog.csdn.net/douyinbuwen/article/month/1543/25518/27190)[.](https://blog.csdn.net/douyinbuwen/article/month/1169/28862/30534)[.](https://blog.csdn.net/douyinbuwen/article/month/1818/32304/1502)[.](https://blog.csdn.net/douyinbuwen/article/month/1444/2677/4036)[.](https://blog.csdn.net/douyinbuwen/article/month/1070/5290/6962)[.](https://blog.csdn.net/douyinbuwen/article/month/1719/8634/10306)[.](https://blog.csdn.net/douyinbuwen/article/month/1345/11978/13650)[.](https://blog.csdn.net/douyinbuwen/article/month/1994/15322/16994)[.](https://blog.csdn.net/douyinbuwen/article/month/1588/18666/20338)[.](https://blog.csdn.net/douyinbuwen/article/month/1214/22010/23682)[.](https://blog.csdn.net/douyinbuwen/article/month/1863/25354/27026)[.](https://blog.csdn.net/douyinbuwen/article/month/1489/28698/30370)[.](https://blog.csdn.net/douyinbuwen/article/month/1115/32042/946)[.](https://blog.csdn.net/douyinbuwen/article/month/1764/2617/4289)[.](https://blog.csdn.net/douyinbuwen/article/month/1390/5961/7633)[.](https://blog.csdn.net/douyinbuwen/article/month/1016/9305/10977)[.](https://blog.csdn.net/douyinbuwen/article/month/1665/12649/14321)[.](https://blog.csdn.net/douyinbuwen/article/month/1291/15993/17665)[.](https://blog.csdn.net/douyinbuwen/article/month/1940/19337/21009)[.](https://blog.csdn.net/douyinbuwen/article/month/1566/22681/24353)[.](https://blog.csdn.net/douyinbuwen/article/month/1192/26025/27697)[.](https://blog.csdn.net/douyinbuwen/article/month/1841/29369/31041)[.](https://blog.csdn.net/douyinbuwen/article/month/1467/32713/1617)[.](https://blog.csdn.net/douyinbuwen/article/month/1093/3289/4961)[.](https://blog.csdn.net/douyinbuwen/article/month/1742/6633/8305)[.](https://blog.csdn.net/douyinbuwen/article/month/1368/9977/11649)[.](https://blog.csdn.net/douyinbuwen/article/month/2017/13321/14993)[.](https://blog.csdn.net/douyinbuwen/article/month/1643/16769/18755)[.](https://blog.csdn.net/douyinbuwen/article/month/1237/20009/21681)[.](https://blog.csdn.net/douyinbuwen/article/month/1886/23353/25025)[.](https://blog.csdn.net/douyinbuwen/article/month/1512/26697/28369)[.](https://blog.csdn.net/douyinbuwen/article/month/1138/30041/31713)[.](https://blog.csdn.net/douyinbuwen/article/month/1787/617/2289)[.](https://blog.csdn.net/douyinbuwen/article/month/1413/3961/5633)[.](https://blog.csdn.net/douyinbuwen/article/month/1039/7305/8976)[.](https://blog.csdn.net/douyinbuwen/article/month/1688/10648/12320)[.](https://blog.csdn.net/douyinbuwen/article/month/1314/13992/15664)[.](https://blog.csdn.net/douyinbuwen/article/month/1963/17336/19008)[.](https://blog.csdn.net/douyinbuwen/article/month/1588/20680/22450)[.](https://blog.csdn.net/douyinbuwen/article/month/1214/24416/25592)[.](https://blog.csdn.net/douyinbuwen/article/month/1863/26950/28204)[.](https://blog.csdn.net/douyinbuwen/article/month/1594/29876/31548)[.](https://blog.csdn.net/douyinbuwen/article/month/1533/452/2124)[.](https://blog.csdn.net/douyinbuwen/article/month/1764/3796/5468)[.](https://blog.csdn.net/douyinbuwen/article/month/1390/7140/8812)[.](https://blog.csdn.net/douyinbuwen/article/month/1016/10484/12156)[.](https://blog.csdn.net/douyinbuwen/article/month/1665/13828/15500)[.](https://blog.csdn.net/douyinbuwen/article/month/1259/17172/18844)[.](https://blog.csdn.net/douyinbuwen/article/month/1908/20516/22188)[.](https://blog.csdn.net/douyinbuwen/article/month/1534/23860/25532)[.](https://blog.csdn.net/douyinbuwen/article/month/1160/27308/29294)[.](https://blog.csdn.net/douyinbuwen/article/month/1809/30548/32220)[.](https://blog.csdn.net/douyinbuwen/article/month/1435/1124/2796)
本文链接：https://blog.csdn.net/douyinbuwen/article/details/127155798
为什么页面显示能动态添加到元素 而打印却没有添加上_地推的博客-爱代码爱编程

为什么页面显示能动态添加到元素而打印却没有添加上_地推的博客-爱代码爱编程
