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列表中被删除。
JavaScript之节点的创建、替换、删除、插入的更多相关文章
- day35—JavaScript操作元素(创建、删除)
转行学开发,代码100天——2018-04-20 JavaScript对DOM元素的创建.删除操作. 1.创建DOM元素 appendChild方法 createElement(ochild); op ...
- js节点的创建添加删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript -- 控制table的创建 与 删除, 排序, 表格颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法
jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容 ,html() - 设置或返回所 ...
- JavaScript 对图像进行(追加,插入,替换,删除)
JavaScript 对图像进行(追加,插入,替换,删除) 本次所学内容: document.querySelector('.container') 这个是可以查找单个[id标签和class标签] d ...
- 节点操作-创建并添加&删除节点&替换&克隆节点
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
- DOM节点的创建、插入、删除
值得注意的是:节点的创建.插入以及删除都是操作父级容器.(1)创建var newDiv = documnet.createElement('div'); ——创建的元素只能操作一次 (2)插入/追加a ...
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
随机推荐
- 读书共享 Primer Plus C-part 8
第十三章 文件输入/输出 fopen--fclose fopen 是文件的操作的开始 fclose是文件操作的结束 getc--putc getchar--putchar getc对应文件的获取单个字 ...
- 利用VNC远程登录Linux服务器简易版
我负责管理实验室的一台服务器,安装的系统是CentOS 6.7.使用pietty远程登录服务器(命令行) 需求:使实验室的同学和老师使用RealVNC远程登录服务器. 一,首先检查一下服务器是否安装V ...
- requirejs 加载其它js
基本代码: require.config({ // baseUrl : '/js/' paths: { jquery: '/js/jquery-1.11.3.min', validate: '/js/ ...
- 高效测试用例组织算法pairwise之Python实现
------------------------------------------本文专为<光荣之路培训 >原创,如有转载请注明出处--------------------------- ...
- 列表的系列操作(python)
除了定义和切片外,这里总结下系列的操作: # hanbb come on! names = ["hbb",'tian','bao','cheng'] #Add names.appe ...
- 谈一款MOBA游戏《码神联盟》的服务端架构设计与实现
一.前言 <码神联盟>是一款为技术人做的开源情怀游戏,每一种编程语言都是一位英雄.客户端和服务端均使用C#开发,客户端使用Unity3D引擎,数据库使用MySQL.这个MOBA类游戏是笔者 ...
- 配置PLSQL,提升工作效率
界面模板的配置: 方便用户快速点击需要的功能.如打开SQL Window 1.打开customize,用户自定义Toolbars对话框. 2.在Commands命令标签页,选中要添加的命令,拖动到工具 ...
- GoWorld – 用Golang写一个分布式可扩展、可热更的游戏服务器
GoWorld代码:https://github.com/xiaonanln/goworld Golang具有运行效率高.内存安全等优良特性,因此是非常适合用来进行服务器开发.使用Golang开发游戏 ...
- JS和jQuery中ul li遍历获取对应的下角标
首先先看代码: html代码部分: <div id="div"> <ul> <li>1111111</li> <li>2 ...
- 异常解决:Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
异常描述 这个异常通常有如下信息: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failu ...