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& ...
随机推荐
- 使用Entity Framework时，序列化出错
在使用Entity Framework时,如果数据库中有两个表是一对多或者是多对多的关系,那么生成的实体类中就有一个导航属性.这个导航属性前面都加上了一个virtual关键字.这个v ...
- Excel拼接字符串
有时候,需要把一些Excel表格中的内容进行拼接,比如A4行的值是前面三行值的加起来.在Excel中可以使用&来进行这种操作.如果数据非常多,就可以使用这个来进行批量操作.
- Qt Qpushbutton美化问题
昨天在论坛看到一个网友的提问,如下 我想到的第一个就是可能需要重载Pushbutton,不过看到有网友回复可以使用stykesheet解决,今天尝试了一下,还是没有成功, 一下是我使用车重载的Push ...
- jmeter+ant的使用
1.安装ant 下载ant,解压到某盘 2.配置环境变量: 变量名称 变量值 备注 ANT_HOME F:\apache-ant-1.10.3 Ant的解压路径 Path %ANT_HOME%\bin ...
- Datenode无法启动
执行start-dfs.sh后,或者执行datenode没有启动.很大一部分原因是因为在第一次格式化dfs后,启动并使用了hadoop,后来又重新执行了格式化命令 这时主节点namenode的clus ...
- 切换pip源的简便方法
网上大部分帖子讲的都是打开配置文件修改,那样太麻烦了,其实只要一行命令搞定: pip config set global.index-url https://pypi.tuna.tsinghua.ed ...
- 安装arch系统时，把ubuntu的efi分区格式化
导致无法从grub进入ubuntu,之后我进入win10,把ubuntu的分区都删了. 再重启,只能进入黑色的grub界面,显示 grub>> 甚至无法进入win10.只能通过在开机时按F ...
- ubuntu中 VI 方向键、删除键问题
这两天重新装的ubuntu系统,发觉使用VI时,方向键按下去后变成ABCD,删除键无效.网上搜寻一番,应该是VI软件本身的问题,顾卸载重装即可,步骤如下: 1.执行命令 sudo apt-get re ...
- 基于规则的中文分词 - NLP中文篇
之前在其他博客文章有提到如何对英文进行分词,也说后续会增加解释我们中文是如何分词的,我们都知道英文或者其他国家或者地区一些语言文字是词与词之间有空格(分隔符),这样子分词处理起来其实是要相对容易很多, ...
- cocos2d-x环境搭建 摘自百度文库
cocos2d-x环境搭建 引言:笔者在网上寻觅了很多资料,最终发现了这份实际可用的文档,供大家参考.源地址:http://wenku.baidu.com/view/93f7b0f1102de2bd9 ...