原生js删除节点、替换节点、复制节点

1、removeChild() 用来删除父节点的一个子节点。
parent.removeChild(childNode);
如下:

<div id="box">
    <p id="p1">这是一个段落</p>
    <p id="p2">第二个段落</p>
</div>
<script>
    var box=document.getElementById("box");  //找到父元素
    var p1=document.getElementById("p1");    //找到子元素    
    box.removeChild(p1);  
    //也可以通过要删除的子节点的父节点删除子节点
    p1.parentNode.removeChild(p1);                  
</script>

2、replaceChild() 用新节点替换某个子节点。
parent.replaceChild (newnode,oldnode ) ;
如下:

<div id="box">
    <p id="p1">这是一个段落</p>
    <p id="p2">第二个段落</p>
    <div id="div1">这是div</div>
</div>
<script>
    var box=document.getElementById("box");  //找到父元素
    var p1=document.getElementById("p1");    //找到要替换的元素

    var p3=document.createElement('p');//创建要替换的元素
    p3.innerHTML="这是第三个段落";  //为创建的元素赋值
    box.replaceChild(p3,p1);  //替换节点
    p1.parentNode.replaceChild(p3,p1); //通过parentNode节点替换
</script>

注意:新节点可以是文档中某个已存在的节点,也可以创建新的节点。

3、cloneNode() 复制节点并返回复制的节点
node.cloneNode(true|false) ; //默认是 false。
参数设置为 true,克隆节点及其属性,以及后代;设置为 false,克隆节点本身
如下:

<div id="main">
    <div id="box">
        <p id="p1">这是一个段落</p>
        <p id="p2">第二个段落</p>
    </div>
</div>
<script>
    var main=document.getElementById("main"); 
    var box=document.getElementById("box"); 

    var newNode=box.cloneNode(true);
    main.appendChild(newNode);
    console.log(main);
</script>

当参数为true时,结果如下:
这里写图片描述

当参数为false时,结果如下:
这里写图片描述

阅读更多
文章标签: javascript
个人分类: js dom
上一篇原生js添加节点appendChild、insertBefore
下一篇原生js简单的省市联动
想对作者说点什么? 我来说一句

JS 使用cloneChild 克隆元素节点

byc233518 byc233518

2015-06-21 22:39:28

阅读数:6021

没有更多推荐了,返回首页

关闭
关闭