posts - 501,comments - 0,views - 23683

创建添加

<body>
    <input type="text" id="txt1">
    <input type="button" id="btn1" value="创建">
    <ul id="ul1">
    </ul>
    <script>
        window.onload = function () {
            var oUl = document.getElementById('ul1');
            var oBtn = document.getElementById('btn1')
            // id
            var oTxt = document.getElementById('txt1')
            // dom节点
            var aLi = oUl.getElementsByTagName('li')
            // class
            // that.input = document.getElementsByClassName("js-input")[0];
            // 自动选择第一个出现的css元素
            // that.input = document.querySelector('.js-input');
            oBtn.onclick = function () {
                var oLi = document.createElement('li') //创建元素
                oLi.innerHTML = oTxt.value
                if (aLi.length > 0) {
                    oUl.insertBefore(oLi, aLi[0]) //插入元素到指定位置
                } else {
                    oUl.appendChild(oLi) //插入元素到容器末尾
                }
                oTxt.value = ''
            }
        }
    </script>
</body>

移除

<body>
    <ul id="ul1">
        <li>hjsioug<a href="javascript:;">删除</a></li>
        <li>fssaaa<a href="javascript:;">删除</a></li>
        <li>fddvfthc<a href="javascript:;">删除</a></li>
        <li>gwsvgeex<a href="javascript:;">删除</a></li>
    </ul>
    <script>
        window.onload = function () {
            var oUl = document.getElementById('ul1');
            var aA = oUl.getElementsByTagName('a');
            for(var i = 0; i < aA.length; i++){
                aA[i].onclick = function(){
                    oUl.removeChild(this.parentNode) //removeChild a标签的父节点
                }
            }
            // 删除preTag标签本身
            preTag.remove();
        }
    </script>
</body>
posted on   垂序葎草  阅读(33)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示