码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-03-26 16:28:38      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:文本   替代   节点   color   doc   foo   range   orange   添加   

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列表中被删除。

 

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

标签:文本   替代   节点   color   doc   foo   range   orange   添加   

原文地址:http://www.cnblogs.com/hamihua/p/6622869.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!