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& ...
随机推荐
- C语言RL78 serial bootloader和C#语言bootloader PC端串口通信程序
了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 前段时间完成的hype ...
- NoSQL简单学习（一）
只是简单的知道有这个东西,却从来没有去接触,今天看了几篇文章,记录一下,开始慢慢接触这一领域 简介: 8种Nosql数据库系统对比 http://blog.jobbole.com/1344/ 一网打尽 ...
- 26、js阶段性复习
1.一元运算符 Operator + 可用于将变量转换为数字: <!DOCTYPE html> <html> <body> <p> typeof 操作符 ...
- 【紫书】（UVa12563）Jin Ge Jin Qu hao
继续战dp.不提. 题意分析 这题说白了就是一条01背包问题,因为对于给定的秒数你只要-1s(emmmmm)然后就能当01背包做了——那1s送给劲歌金曲(?).比较好玩的是这里面dp状态的保存——因为 ...
- fiddler抓包-简单易操作（一）
1.下载fiddler 可以到fiddler官网去下,网址:https://www.telerik.com/download/fiddler 下载完成后,安装即可. 2.运行fiddler,进入fid ...
- 菜鸟级appium 必看
之所以写这个,因为太多新人,appium环境半天都搭建不好,版本问题,兼容问题等等. 自己的解决方案:1 官网下载nodejs,建议安装长期支持版 2 进入appium官网,点击下载,跳转到githu ...
- 九度OJ--Q1165
import java.util.ArrayList;import java.util.Scanner; /* * 题目描述: * 读入数据string[ ],然后读入一个短字符串.要求查找strin ...
- 并查集——poj1182（带权并查集高阶）
题目链接:食物链 题解:点击 说一声:这题关系推导值得学习.
- MySql动态生成SQL并执行
场景:由于一些表中设计了一些冗余字段,因此在主表修改了该冗余字段的值得时候,需要动态更新在其他表中冗余字段的值 BEGIN #Routine body goes here... /*SQL语句变量*/ ...
- Good Time 冲刺 三
第三天 日期:2018.6.16 一.今日完成任务情况及遇到的问题 王怡镔:继续在学习微信小程序的设计,完善设计发现页面,开始编写发现页面 于鑫宇:配合黄鹤的工作,学习端口相关知 胡雅馨:继续改进优化 ...