dom 元素节点操作方法替换删除_dom替换元素节点-CSDN博客

本文链接：https://blog.csdn.net/weixin_45796375/article/details/102922986

dom 元素节点操作方法

替换：

replaceChild()

【格式】parent.rep;aceChild(newNode,oldNode);
功能：用newNode将oldNode给替换掉。**


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script type="text/javascript">

    window.onload=function(){
        var o=document.getElementById("div1");
        var node =document.createElement("strong");
  
        o.parentNode.replaceChild(node,o);  
    }
    //div 替换成 strong
     
    
    </script>
</head>
<body>
 
    <span>hello world</span>
    <div id="div1"> 你好啊</div>
    <p> hi</p>

</body>
</html>

div 替换成 strong 在这里插入图片描述
**

删除：

removeChild()
[格式] node.parentNode.removeChild(node);
功能：删除节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script type="text/javascript">

    window.onload=function(){
    var o=document.getElementById("div1");
    o.parentNode.removeChild(o);
    }
    </script>
</head>
<!-- <body>
     removeChild()
    [格式] node.parentNode.removeChild(node);
    功能：删除节点 


    <span>hello world</span>
    <div id="div1"> 你好啊</div>
    <p> hi</p>

</body>
</html>