添加文本内容到下面并且可以删除和复制_到以下内容么下面内容-优快云博客

本文链接：https://blog.youkuaiyun.com/OrdnAry/article/details/108077243

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 400px; height: 100px; background-color: orange}
        #div2{width: 400px; height: 500px; background-color: peachpuff}
        #input1 {width: 380px; height: 30px; font-size: 18px}
        #div1 button{width: 100px; height: 30px; font-size: 18px; background-color: black; color: white; margin-left: 5px; margin-top: 5px}
        #div2 div{border-bottom: 1px dashed gray; padding: 2px; position: relative;}
        #div2 div button{position: absolute; right: 0px}
    </style>
    <script>
        function randomColor(){
            var str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1)";
            return str;
        }
        window.onload = function(){
            //找到需要的节点
            var div1 =document.getElementById("div1");
            var div2 =document.getElementById("div2");
            var input =document.getElementById("input1");

            var btns =div1.getElementsByTagName("button");

            //添加事件
            btns[0].onclick = function (){
                if(!input.value){
                    alert("输入框中的内容不能为空！");
                }else{
                    //创建newdiv 的整体
                    var newdiv = document.createElement("div"); //创建div
                    var text = document.createTextNode(input.value) //获取文本内容
                    newdiv.appendChild(text);   //将文本内容插入到div中
                    newdiv.style.backgroundColor = randomColor();//背景颜色随机
                    var btn = document.createElement("button");//创建按钮
                    btn.innerHTML = 'X';
                    newdiv.appendChild(btn);//将按钮插入到div中

                    //点击div下的按钮的X号时删除div
                    btn.onclick = function(){
                            div2.removeChild(this.parentNode);
                        }
                    //把newdiv插入到div2中
                    div2.appendChild(newdiv);
                     input.value = '';
                }
            }
            //用事件委托设置点击X能删除内容
            div2.onclick = function (ev){
                var e = ev||window.event;
                var target = e.target || window.event.srcElement;
                if(target.nodeName.toLowerCase() == 'button'){
                    div2.removeChild(target.parentNode);
                }
            }
            
            //删除事件
            btns[1].onclick = function (){
                div2.removeChild(div2.lastChild);
            }
            //复制事件
            btns[2].onclick = function (){
                var newNode = div2.lastChild.cloneNode(true); //先克隆
                 div2.appendChild(newNode); //在把克隆的插到最后一个
            }
        }
    </script>
</head>
<body>
    <div id = 'div1'>
            <input type="text" id = 'input1' placeholder="输入内容"/><br>
            <button>增加</button>
            <button>删除</button>
            <button>拷贝</button>
        </div>
        <div id = 'div2'></div>
</body>
</html>