DOM创建和删除节点
一、创建节点
3步
1.创建空元素对象：
var newElem=document.createElement("标签名");
例如：var a=document.createElement("a");//<a></a>
2.设置必要属性
newElem.属性名="值";
newElem.innerHTML="文本";
例如：a.href="http://tmooc.cn";a.innerHTML="go to tmooc";
3.将元素对象挂载到指定父元素下(2种)
追加：parent.appendChild(newElem);
插入新元素：parent.insertBefore(newElem,oldElem);
强调：只有向已经在页面中的父元素追加新节点，才导致渲染
二、创建文档片段
文档片段：内存中，临时存储多个子节点的存储空间
减少渲染频率： 先将所有平级元素先追加到文档片段中,将文档片段一次性追加到父元素下.
var frag=new document.createDocumentFragment();
示例：动态创建表格
<!DOCTYPE HTML>
<html>
<head>
<title>动态创建表格</title>
<meta charset="utf-8" />
<style>
table{width:600px; border-collapse:collapse;
text-align:center;
}
td,th{border:1px solid #ccc}
</style>
<script> //加入从服务器端收到json字符串如下：
var json="[{'ename':'Tom','salary':5000,'age':25},{'ename':'John','salary':7000,'age':28},{'ename':'mary','salary':6000,'age':26}]";
//使用eval函数，将json字符串，转化为程序中的对象
var emps=eval('('+json+')');
console.log(emps);
//当页面加载后，在data div中创建table对象及子对象
window.onload=function(){
//step1:创建空table对象
var table=document.createElement("table");
//step2:添加表头行 /*
2.1创建空的tr对象，临时保存在tr中
2.2创建3个空th对象，分别是 姓名 薪资 年龄
2.3将三个th分别追加到tr对象下
2.4将tr追加到table对象下
*/
var tr=document.createElement("tr");
var th1=document.createElement("th");
th1.innerHTML="姓名";
var th2=document.createElement("th");
th2.innerHTML="薪资";
var th3=document.createElement("th");
th3.innerHTML="年龄";
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
table.appendChild(tr); //遍历emps数组，将数组中每个对象添加到table中
for (var i=0; i<emps.length; i++)
{
//建立一个tr元素
var tr=document.createElement("tr");
for (var x in emps[i])
{
//设置td元素
var td=document.createElement("td");
if (x=="salary")
{
td.innerHTML="¥"+emps[i][x].toFixed(2);
}else{
td.innerHTML=emps[i][x];
}
//将td追加到tr中
tr.appendChild(td);
}
//将tr追加到table中
table.appendChild(tr);
} //Step2:找到data div,将table追加到data下
document.querySelector("#data").appendChild(table);
} </script>
</head>
<body>
<div id="data"></div>
</body>
</html>
三、删除、替换节点
1.删除节点
parent.removeChild(oldElem);
oldElem.parentNode.removeChild(oldElem);
2.替换节点：parent.replaceChild(newElem,oldElem);
示例：联动菜单 自动添加和删除节点
<!DOCTYPE HTML>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
<script>
/*使用 HTML DOM 的方式实现联动菜单*/
var categories=[
{"id":10,"name":'男装',"children":[
{"id":101,"name":'正装'},
{"id":102,"name":'T恤'},
{"id":103,"name":'裤衩'}
]},
{"id":20,"name":'女装',"children":[
{"id":201,"name":'短裙'},
{"id":202,"name":'连衣裙'},
{"id":203,"name":'裤子',"children":[
{"id":2031,"name":'长裤'},
{"id":2031,"name":'九分裤'},
{"id":2031,"name":'七分裤'}
]},
]},
{"id":30,"name":'童装',"children":[
{"id":301,"name":'帽子'},
{"id":302,"name":'套装',"children":[
{"id":3021,"name":"0-3岁"},
{"id":3021,"name":"3-6岁"},
{"id":3021,"name":"6-9岁"},
{"id":3021,"name":"9-12岁"}
]},
{"id":303,"name":'手套'}
]}
]; //专门遍历一级分类 data保存当前同级分类的数组
function loadData(data){
//创建一个select对象
//在select对象中追加一个新option，内容为请选择"-请选择-",值为0
//遍历data中每个类别对象
// 每遍历一个，就要在select中追加一个option，内容是当前对象的name属性值为当前对象的id属性
//
var select=document.createElement("select");
select.add(new Option("-请选择-",0));
for (var key in data)
{
select.add(new Option(data[key].name,data[key].id));
}
//为新创建的select对象，添加onchange时间
select.onchange=function(){
//this-->select //将当前select后的元素都删除
var parent=this.parentNode;
while(parent.lastChild!=this){
parent.removeChild(parent.lastChild);
} /*
获得和选中项位置对应的类别子对象
*/
var category=data[this.selectedIndex-1];
if(category!=undefined&&category.children){
loadData(category.children);
}
}
document.querySelector("#category").appendChild(select); } window.onload=function(){
loadData(categories);
} </script>
</head>
<body>
<div id="category"></div>
</body>
</html>
DOM创建和删除节点的更多相关文章
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
- 创建和删除节点：——核心DOM
1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标签名"); ...
- DOM 创建元素 删除元素（结点）
创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <script> var para=document. ...
- jQuery – 7.动态创建Dom、删除节点
动态创建Dom节点 1.使用$(html字符串)来创建Dom节点 2.append方法用来在元素的末尾追加元素 案例:动态生成网站列表 3.prepend,在元素的开始 ...
- jQuery里面的DOM操作（查找，创建，添加，删除节点）
一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append("定义的节点& ...
- JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- 节点操作-创建并添加&删除节点&替换&克隆节点
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
- jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
随机推荐
- 微信H5支付 在其他浏览器调用微信支付
微信H5支付的相关资料不是很多.不过步骤上来说不是很复杂 比公众号支付简单很多. 先上官方文档吧 https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapt ...
- linux 操作之一 如何在linux将本地数据*.sql文件导入到linux 云服务器上的mysql数据库
liunx 版本ubuntu 16.4 mysql 版本 5.6 1)准备*.sql文件 (* 是准备导入的sql文件的名字) 2)liunx 远程客户端 SecureCRT 7.0 alt+p ...
- Java日志（二）：log4j与XML配置文件
[Java日志(一):log4j与.properties配置文件]一文列举的几个案例以.properties文件作为log4j的配置文件,本文简单看一下log4j与XML配置文件 (1)XML配置文件 ...
- 安装QC的心（新）路历程 纯记录 无技术
之前就只是看来软件测试原书第二版学习力理论知识,关于书中提到的缺陷管理工具,测试管理工具等也没有亲自去安装使用,感觉太不应该了.于是我就上网了解了一些测试管理工具后,决定先选择QC来学习.说实话,当初 ...
- 【Selenium-Python】Selenium-Firefox 环境配置 win64
Python 已安装完毕 Selenium 安装: Windows > cmd pip install selenium 注:未加selenium版本号时默认安装最新版本. 查询当前Seleni ...
- windows本地连接腾讯云的mysql服务器
由于最近数据库需要用上Navicat作为数据库,但是我的mysql装在腾讯云的Ubuntu上,因此需要做些配置开放端口,和监听端口,因此略显麻烦,这里记录一下连接的具体步骤,方便以后又得装(flag) ...
- HTTPS初始
https会话 1客户端 2服务器端 1 ---http三次握手--- 2 1<--------------->2 协商建立ssl会话 选择加密协议 sslv3 1 <------- ...
- 3.爬虫 urlib库讲解 总结
urllib库的总结: 用ProcessOn(安利这个软件,够用了)根据前面的几节内容做了个思维导图. urllib库一共有四个模块: request:它是最基本的模块,可以用来模拟发送请求 erro ...
- 用tensorflow实现自然语言处理——基于循环神经网络的神经语言模型
自然语言处理和图像处理不同,作为人类抽象出来的高级表达形式,它和图像.声音不同,图像和声音十分直觉,比如图像的像素的颜色表达可以直接量化成数字输入到神经网络中,当然如果是经过压缩的格式jpeg等必须还 ...
- 最短路径——Dijkstra算法
一.相关定义 最短路径:从图中的某个顶点出发到达另外一个顶点的所经过的边的权重和最小的一条路径. 地位:Dijkstra算法是很有代表性的最短路算法,在很多专业课程中都作为基本内容有详细的介绍,如数据 ...