JavaScript之节点的创建、替换、删除、插入

1.节点的创建

节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添加到一个如下所示的列表中

<ul id = "fruit"><li>苹果</li><li>橘子</li><li>西瓜</li><li>梨</li>
</ul>

可添加如下javascript代码

var frNode = document.getElementById("fruit");
var liNode = creatElement("li");
var hmgNode = creatTextNode("哈密瓜");
liNode.appendChild(hmgNode);
frNode.appendChild(liNode);

2.节点的替换

节点的替换可使用parentNode.replaceChild(newNode,oldNode);这里的oldNode是将要被替换的节点，newNode是替换的节点，parentNode是oldNode的父节点。示例代码如下

<ul id = "fruit"><li id = "apple">苹果</li><li id = "orange">橘子</li><li>西瓜</li><li>梨</li>
</ul>

<ul id = "food"><li id = "biscuit">饼干</li><li>米饭</li><li>牛肉</li><li>面条</li>
</ul>

可添加如下javascript代码

var frNode = document.getElementById("fruit");
var apNode = document.getElementById("apple");
var biNode = document.getElemetnById("biscuit");
frNode.replace(biNode,apNode);

此时苹果被饼干所替代，同时饼干在food列表中被删除。

3.节点的删除

节点的删除使用removeChild(),这里有一个简便的方法删除节点，比如说想要删除上面那个fruit列表中的apple标签，则

var apNode = document.getElementById("apple");
apNode.parentNode.removeChild(apNode);

也就是说要想删除某个节点，可以使用这个节点的父节点的removeChild()方法删除这个节点。

4.节点的插入

节点的插入使用insertBefore(newNode,nextNode)方法,即在某个节点之前插入新节点。比如我们想要在fruit列表中加入food列表中的饼干，则

var frNode = document.getElementById("fruit");
var orNode = document.getElementById("orange");
var biNode = document,getElementById("biscuit");
frNode.insertBefore(biNode,orNode);

这样饼干被加入到fruit列表中，同时在food列表中被删除。

转载于:https://www.cnblogs.com/hamihua/p/6622869.html

JavaScript之节点的创建、替换、删除、插入相关推荐

DOM 节点的创建、删除、替换
只要在屏幕上托三个button按钮就可以了,下面就是程序运行时的界面: <head> <title></title> <script type ...
javascript 数组替换删除插入元素到指定位置
Splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组, 并以数组形式返回被修改的内容.此方法会改变原数组. splice(一,二,三) 参数一: 删除指定位置参数二:删除个数 ...
节点操作-创建createElement||appendChild-/追加-/插入insertBefore-/替换replaceChild-/删除remove-克隆元素 cloneNode（增删改查）
01-节点操作-创建元素·createElement||appendChild <body><div class="box"><span>我是前 ...
JS 数组 isAarray() typeof push() unshift() splice()替换/删除/插入 slice()切片 join() split() reverse concat
lianxuudadian isAarray() shift转移 unshift取消转移 push pop unshift shift splice 粘接 slice 切片 Join() s ...
JavaScript DOM 6 - 节点的创建，插入，替换，删除
1: 节点的创建新建一个新节点的方式主要有三种: 1: createElement() document.createElement(tagName); //返回一个HTMLElement类型的节点 ...
节点操作-创建并添加删除节点替换克隆节点
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
JavaScript学习笔记：创建、添加与删除节点
JavaScript学习笔记:创建.添加与删除节点文章目录 JavaScript学习笔记:创建.添加与删除节点一.DOM对象节点类型二.创建节点 1.创建元素节点 2.创建文本节点 3.创建属性 ...
DOM基本操作（获取元素、节点的创建和添加、节点的替换和删除）
获取元素 document.getElementById通过id名字获取节点 <div id="box"><ul><li>1</li> ...
js节点的添加删除插入替换
一.创建元素节点createElement 添加节点 node.appendChild(child) -->node父级 child 子级元素追加到最后面效果图二.插入节点inser ...
jQuery节点操作创建节点元素删除节点替换节点复制节点等基本本操作
节点操作 jQuery中节点操作查找节点(前面章节已讲) 创建节点插入节点删除节点替换节点复制节点创建节点元素工厂函数$()用于获取或创建节点 $(selector):通过选择器获取节点 ...

JavaScript之节点的创建、替换、删除、插入

JavaScript之节点的创建、替换、删除、插入相关推荐

最新文章

热门文章