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& ...
随机推荐
- kafka监听类
package com.datad.dream.service; import com.alibaba.fastjson.JSON; import com.datad.dream.dao.KafkaI ...
- FreeRTOS任务暂停和启动函数
任务句柄 TaskHandle_t pump_task_handle = NULL; 任务的启动函数 if(eTaskGetState(pump_task_handle) != eRunning) v ...
- **leetcode笔记--4 Sum of Two Integers
question: Calculate the sum of two integers a and b, but you are not allowed to use the operator + a ...
- Django笔记 —— 模型高级进阶
最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...
- Linux 下安装Python报错：zlib not available
问题描述: 在Linux下安装Python时出现一个错误:zipimport.ZipImportError: can't decompress data; zlib not available 详细错 ...
- CSS : @media 示例
.example { padding: 20px; color: white; } /* Extra small devices (phones, 600px and down) */ @media ...
- P3950部落冲突
题面 \(Solution:\) 法一:LCT裸题 又好想又好码,只不过常数太大. 法二:树链剖分 每次断边将该边权的值++,连边--,然后边权化点权(给儿子),询问就查询从x到y的路径上的边权和,树 ...
- 传输控制层协议TCP概述---抄书
1.TCP的主要特点 TCP是TCP/IP体系中非常复杂的一个协议.下面介绍TCP的最主要的特点. (1)TCP是面向连接的运输层协议.也就是说,应用程序在使用TCP协议之前,必须先建立TCP连接.在 ...
- 树莓派搭建 Hexo 博客（一）
Hexo 一个开源的博客框架,本文记录了一下在树莓派上搭建 Hexo 博客的过程. 什么是 Hexo? Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解 ...
- BZOJ 1010 HNOI2008 玩具装箱 斜率优化
题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=1010 Description P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的 ...