动态操作dom节点

最新推荐文章于 2022-10-31 17:57:09 发布

原创

最新推荐文章于 2022-10-31 17:57:09 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5

本文详细介绍了如何使用JavaScript在网页中进行动态DOM操作，包括添加、删除、修改和查找DOM节点的方法，结合实例代码深入理解这些基本操作，为前端开发提供实用技巧。

 <!-- 
        使用js代码创建删除节点
        
           - 创建节点:
                createElement
                createTextNode
                createAttribute

           - 添加节点
              父节点.appendChild(子节点)
              父节点.insertBefore(新子节点，原来的子节点)

           - 移除节点
              父节点.removeChild(子节点)
              节点.remove()

           - 替换节点
              replaceChild   
           - 复制节点
             cloneNode
     -->
</head>

<body>
    <div>
        <p>原来的节点</p>
        
    </div>

    <script>
        //插入节点
        function testInsertNode() {
   
   
            var divEle = document.querySelector('div')
            var pEle = document.querySelector('p')

            //创建一个新的span节点
            var spanEle = document.createElement('span') //<span></span>
            var textNode = document.createTextNode('我是新元素span') //我是新元素span
            spanEle.appendChild(textNode) //<span>我是新元素span</span>

            divEle.insertBefore