html01

最新推荐文章于 2022-11-16 09:00:26 发布

噢啦噢啦噢啦

最新推荐文章于 2022-11-16 09:00:26 发布

阅读量256

点赞数

分类专栏： HTML.

本文链接：https://blog.csdn.net/qq_35860368/article/details/53679402

版权

HTML. 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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>