【JavaScript】原生js中DOM操作之元素创建、插入和移除

最新推荐文章于 2022-11-23 14:27:08 发布

meichaoWen

最新推荐文章于 2022-11-23 14:27:08 发布

阅读量1.8k

点赞数 1

分类专栏： JS实例文章标签： javascript js

本文链接：https://blog.csdn.net/meichaoWen/article/details/112388062

版权

JS实例专栏收录该内容

60 篇文章 2 订阅

订阅专栏

创建元素

<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')
            var oTxt = document.getElementById('txt1')
            var aLi = oUl.getElementsByTagName('li')
            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标签的父节点
                }
            }
        }
    </script>
</body>

文档碎片

document.createDocumentFragment()

meichaoWen

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】原生js中DOM操作之元素创建、插入和移除

创建元素<body> <input type="text" id="txt1"> <input type="button" id="btn1" value="创建"> <ul id="ul1"> </ul> <script> window.onload = function () { var oUl = document.getElementById(
复制链接

扫一扫