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