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之节点的创建、替换、删除、插入的更多相关文章

  1. day35—JavaScript操作元素(创建、删除)

    转行学开发,代码100天——2018-04-20 JavaScript对DOM元素的创建.删除操作. 1.创建DOM元素 appendChild方法 createElement(ochild); op ...

  2. js节点的创建添加删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. JavaScript -- 控制table的创建 与 删除, 排序, 表格颜色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  5. JavaScript 对图像进行(追加,插入,替换,删除)

    JavaScript 对图像进行(追加,插入,替换,删除) 本次所学内容: document.querySelector('.container') 这个是可以查找单个[id标签和class标签] d ...

  6. 节点操作-创建并添加&删除节点&替换&克隆节点

    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

  7. DOM节点的创建、插入、删除

    值得注意的是:节点的创建.插入以及删除都是操作父级容器.(1)创建var newDiv = documnet.createElement('div'); ——创建的元素只能操作一次 (2)插入/追加a ...

  8. Javascript及Jquery获取元素节点以及添加和删除操作

    用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...

  9. DOM创建和删除节点、HTML DOM常用对象[转]

    创建和删除节点:——核心DOM   1. 创建单个元素节点:3步:      1. 创建空元素节点对象:         var elem=document.createElement("标 ...

随机推荐

  1. Mac之OS系统下搭建JavaEE环境 <五> 之Mysql数据库的安装及配置

    这里将推荐两款 集成的Mysql环境 十分轻便好用,MAMP 和 XAMPP MAMP XAMPP 1.MAMP下载 官网: https://www.mamp.info/en/ 下载安装即可使用 MA ...

  2. gulp环境搭建

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:它不仅对网站资源进行优化,而且在开发过程中很多重复的任务,他可以通过明确的工具自动完成,使用它我们不仅可以很愉快的编写代码 ...

  3. CSS3-loading动画(四)

    图片看的效果真是不行,还是戳下面网址看吧 在线示例:http://liyunpei.xyz/loading.html 十七.效果十七 三个小球,纵向居中,间距撑开,依次改变小球的translateY的 ...

  4. 如何共享数据?- 每天5分钟玩转 Docker 容器技术(41)

    数据共享是 volume 的关键特性,本节我们详细讨论通过 volume 如何在容器与 host 之间,容器与容器之间共享数据. 容器与 host 共享数据 我们有两种类型的 data volume, ...

  5. js实现存储对象的数据结构hashTable和list

    以下代码是typescript语言来写的,其实和es6面向对象的写法基本一致.大家阅读后都明白这些方法的作用. hash hash结构用于处理和表现类似key/value的键值对,其中key通常可用来 ...

  6. php使用flock阻塞写入文件和非阻塞写入文件的实例讲解

    php使用flock阻塞写入文件和非阻塞写入文件的实例讲解: 阻塞写入代码:(所有程序会等待上次程序执行结束才会执行,30秒会超时) <?php $file = fopen("test ...

  7. HDU 5527---Too Rich(贪心+搜索)

    题目链接 Problem Description You are a rich person, and you think your wallet is too heavy and full now. ...

  8. OpenStack neutron 环境云主机使用keepalived vip + 给vip绑定浮动IP 步骤及注意事项

    在openstack环境创建的多台云主机配置keepalived作主备,默认情况下无法生效,直接对云主机一张网卡配置两个IP进行测试也是同样结果,因为: 可以看到,port所在的宿主机上iptable ...

  9. 51nod_1181:质数中的质数

    题目链接 #include<bits/stdc++.h> using namespace std; typedef long long LL; const LL N=1e6; //vect ...

  10. Java并发包基石-AQS详解

    目录 1 基本实现原理 1.1 如何使用 1.2 设计思想 2 自定义同步器 2.1 同步器代码实现 2.2 同步器代码测试 3 源码分析 3.1 Node结点 3.2 独占式 3.3 共享式 4 总 ...