html01

来源:互联网 发布:lcd1602与单片机连接图 编辑:程序博客网 时间:2024/03/29 22:28
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        div{            width: 200px;            height: 200px;            background-color: #f4ffd7;        }    </style></head><body>    <div id="div"></div>    <select name="" id="sel">        <option value="小王">小王</option>        <option value="小青">小青</option>    </select>    <input type="text" id="inp"/>    <input type="button" value="提交" id="btn"/>    <script>        var obtn = document.getElementById("btn");        var oinp = document.getElementById("inp");        var odiv = document.getElementById("div");        var osel = document.getElementById("sel");        /*点击按钮,获取到文本框的值,将值加入到div里面*/        obtn.onclick = function(){            //获取到文本框的值            var value = oinp.value;            var selValue = osel.value;            //创建一个p标签,将内容放在p标签内部,放在div里            var op = document.createElement("p");            var oa = document.createElement("a");            oa.innerHTML = "删除";            oa.href="javascript:";            oa.onclick = function(){                //this表示当前的a标签对象,点击删除要删的是op                //removeChild  找到对象删除里面的字节点                odiv.removeChild(this.parentNode);            }            op.innerHTML = selValue+"说:"+value;            op.appendChild(oa);            odiv.appendChild(op);            oinp.value = "";        }    </script></body></html>

0 0
原创粉丝点击