document_createElement

时间：2023-03-30 22:50:26
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type ="text/javascript">

        window.onload = function () {

            document.getElementById("btnAdd").onclick = function () {

                var ulList = document.getElementById("ulList");

                var linew = document.createElement("li");

                //如果是双标签，那么标签的文本值就是innerHTML或是innerText

              //  linew.innerHTML = "四川";

                linew.innerHTML = prompt("请输入一个值");

                //将创建好的li标签添加到ul里面

                ulList.appendChild(linew);

                ulList.insertBefore(linew, ulList.childNodes[0]);

            };

            var ulli = gel("ulList");

            var lis = ulli.childNodes;//获取所有的子元素

            for (var i = 0; i < lis.length; i++) {

                lis[i].onclick = function () {

                    //  alert(this.innerHTML);//this 你当前点击的那个，this就是这个对象

                    if (confirm("确定要删除吗？"))

                    {

                        this.parentNode.removeChild(this);//删除当前节点

                    }

                }

            }

        }

        function gel(id) { return document.getElementById(id); }

    </script>

</head>

<body>

    <input type ="button" id="btnAdd" value ="新增" />

    <ul id="ulList">

        <li >北京</li>

        <li >上海</li>

        <li >广州</li>

    </ul>

</body>

</html>

　　

相关文章