您现在的位置：首页 >> 前端 >> 内容

html点击事件

时间：2016/12/17 9:31:00 点击：

　　核心提示：!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8title/titlestylep{width: 200px;height: 200px;backgrou...

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <style>  
        p{  
            width: 200px;  
            height: 200px;  
            background-color: #f4ffd7;  
        }  
    </style>  
</head>  
<body>  
    <p id="p"></p>  
    <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 op = document.getElementById("p");  
        var osel = document.getElementById("sel");  
  
  
        /*点击按钮，获取到文本框的值，将值加入到p里面*/  
        obtn.onclick = function(){  
            //获取到文本框的值  
            var value = oinp.value;  
            var selValue = osel.value;  
            //创建一个p标签，将内容放在p标签内部，放在p里  
            var op = document.createElement("p");  
            var oa = document.createElement("a");  
            oa.innerHTML = "删除";  
            oa.href="javascript：";  
            oa.onclick = function(){  
                //this表示当前的a标签对象，点击删除要删的是op  
                //removeChild  找到对象删除里面的字节点  
                op.removeChild(this.parentNode);  
            }  
            op.innerHTML = selValue+"说："+value;  
            op.appendChild(oa);  
  
            op.appendChild(op);  
            oinp.value = "";  
        }  
  
    </script>  
</body>  
</html>