动态操作dom节点

黄酱！

于 2021-12-07 20:46:04 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 前端 html5

本文链接：https://blog.youkuaiyun.com/tianranran/article/details/121777941

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <!-- 
        使用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