使用JavaScript写留言板

HTML代码:

//主要思路:创建一个装li的容器,让留言可以实现所需效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>留言板</title>
</head>
<body>
    <ul class="items"></ul>
    <textarea name="" id="text" cols="30" rows="10"></textarea>
    <button οnclick="createLange()">点击留言</button>
</body>

javascript代码:

<script type="text/javascript">
    var item = document.getElementsByClassName("items")[0];  //获取ul和下标;
        function createLange(){   //创建函数
            var val = text.value;    //把textarea的内容取出来
            var li = document.createElement("li");    //创建li容器装textarea里输入的内容
                li.innerHTML = val;     //创建li容器装textarea里输入的内容
                item.appendChild(li);    //插入节点,把li放入合适位置
                text.value = "";
            var btn = document.createElement("button");     //创建按钮,用来删除li内容
                btn.innerHTML = "删除";
                li.appendChild(btn);     //把按钮插入li后面
                btn.onclick = function(){
                    item.removeChild(li); //remoceChid删除节点,使button按钮生效
            }
        }
</script>

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页