关于html节点操作

html部分

css部分

#div1 {
                width:400px;
                height:100px;
                background-color:orange;
                text-align: center;
            }
            #div2 {
                width:400px;
                height:500px;
                background-color:peachpuff;
            }
            #input1 {
                width:380px;
                height:30px;
                font-size:18px;
                margin:10px;
            }
            #div1 button {
                width:100px;
                height:30px;
                font-size:18px;
                background-color: black;
                color:white;
                margin:5px;
            }
            #div2 div{
                border-bottom: 1px dashed gray;
                padding:2px;
                position:relative;
            }
            #div2 div button {
                position:absolute;
                right:0px;
            }

js部分

 /*
            document.write()
               【注】会覆盖页面上原有的内容
            
            createElement()--创建节点
                格式：document.createElement()
                参数：标签名
                返回值：创建好的这个节点

            appendChild()
                格式：node1.appendChild(node2);
                功能：将node2节点插入到node1节点子节点的末尾
            
            createTextNode()
                格式：document.createTextNode(文本)；
                功能：创建文本节点(纯文本)
            
            insertBefore()
                格式：box1.parentNode.insertBefore(box2,box1);
                功能：将box2节点添加到box1的前面
            
            replaceChild()
                格式：box1.parentNode.replaceChild(box2,box1);
                功能：用box2节点将box1节点替换掉。
            
            cloneNode()
               格式：node.cloneNode()
               格式2：node.cloneNode(true);克隆节点本身和子节点
               返回值：克隆出来的新节点
            
            removeChild()
               格式：box.parentNode.removeChild(box);
               功能：将box节点从页面上删除

            */
            var oDiv1 = document.getElementById("div1");
            var oDiv2 = document.getElementById("div2");
            var oInput = document.getElementById("input1");
            //获取div1下面所有的button
            var aBtns = oDiv1.getElementsByTagName("button");
            
            //分别给三个按钮添加不同的点击函数
            aBtns[0].onclick = function(){
                //判断输入框是否为空
                if(!oInput.value){
                    alert("输入内容不能为空");
                }else{
                    //获取到输入框的内容，创建节点添加到页面
                    var newDiv = document.createElement("div");//创建节点
                    var oTxt = document.createTextNode(oInput.value);//创建文本
                    newDiv.appendChild(oTxt);
                    newDiv.style.backgroundColor = randomColor();
                    oDiv2.appendChild(newDiv);
                    oInput.value = '';//设置为空
                }
            };
            aBtns[1].onclick = function(){
                //删除最后一个节点
                oDiv2.removeChild(oDiv2.lastChild);
            }
            aBtns[2].onclick=function(){
                //拷贝最后一个节点
                var newNode = oDiv2.lastChild.cloneNode(true);
                oDiv2.appendChild(newNode);
            };
            //按下键盘回车键可进行发布
            oInput.onkeydown = function(ev){
                var e = ev || window.event;
                var which = e.keyCode || e.which;
                //回车键ASII码为13
                if(which == 13){
                    aBtns[0].onclick();
                }
            //获取随机颜色
function randomColor(){
    var str = "rgb(" + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + ",1)";
    return str;
};

效果