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

原创 2018年04月17日 18:09:41

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 原生方法对dom节点的操作,创建、添加、删除、替换、插入、复制、移动等操作

创建节点添加
  • hxfdarling
  • hxfdarling
  • 2014-10-21 16:34:49
  • 4276

jQuery操作DOM元素

HTML DOM常见操作:   查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点.   查找节点   关于节点的查找,是利用选择器完成的.   插入节点 ...
  • dyllove98
  • dyllove98
  • 2015-01-19 11:36:38
  • 1256

JS对DOM节点的操作--增加节点,删除节点

(1):DOM :DOM文档树的全称是document object model ,也就是文档对象模型,在js中,把整页面当成一个dom树,而我们可以对每一个节点都可以进行相应的操作,比如创建一个节点...
  • xionggao_123
  • xionggao_123
  • 2016-08-13 19:43:15
  • 6294

节点的操作 创建、添加、移除、移动、复制

(1)创建新节点 createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点...
  • kungfu_panda
  • kungfu_panda
  • 2014-08-24 16:12:46
  • 900

js DOM节点的创建、插入、删除、查找、替换例子

DOM节点是我们前端人员必须要了解并撑握的一个知识点了,下面我来介绍一些节点的创建、插入、删除、查找、替换操作方法,希望这些方法来帮助到各位同学哦。 在前端开发中,js与html联系最紧密的莫过于对...
  • qq_21420429
  • qq_21420429
  • 2016-01-20 10:35:09
  • 1342

juqery删除节点

  • 2011年03月29日 16:31
  • 3KB
  • 下载

jQuery节点追加、替换、删除、复制

追加节点分为父子和兄弟节点的追加。每个追加节点的方法又分主动追加和被动追加。 //1、父子关系的添加 //主动添加 $('#shu').append('关羽');//往后添加 $('#sh...
  • u012887301
  • u012887301
  • 2016-09-03 14:49:36
  • 3203

js 复制节点

/** * 只能复制图片和文本节点 */ function clone_node(node) { var new_node; if (node.nodeName === 'IMG') ...
  • liyujia6636
  • liyujia6636
  • 2017-02-25 21:54:49
  • 557

Node节点的添加、替换和删除

function addnode() {             var pnode = document.createElement('p');             var tnode = ...
  • gengyudan
  • gengyudan
  • 2013-04-15 20:45:12
  • 2923

jQuery之dom操作(查询、创建、插入、删除、复制节点)

jQuery之dom操作(查询、创建、插入、删除节点) 1.查询     利用选择器找到要操作的节点之后,获得节点的值、属性值、文本以及html内容。     a,html()  --  html...
  • u011637069
  • u011637069
  • 2015-12-05 16:22:12
  • 716
收藏助手
不良信息举报
您举报文章:原生js删除节点、替换节点、复制节点
举报原因:
原因补充:

(最多只允许输入30个字)