js···DOM2动态创建节点
1.生成节点的方法 document.createElement(“div”)
2.插入节点的方法 父元素.appendChild(新节点)
在父节点中的子节点后面插入新的节点
3.在指定的位置插入新的节点
(1) 父元素.insertBefore(新节点,谁的前面) 将新节点插入指定的元素前面
4,删除元素节点 父元素.removeChild()
案例分析
仿留言板
兼容性 。
元素没有子节点,ie低版本会读取不到,而标准浏览器会。
因为标准浏览器会把文本节点当作子节点,而ie6-8不会。
超链接a的属性href分析
<a href=””> 点击会刷新页面,相当于向后台发送一次请求。
<a href=”#s”> 锚点跳转 跳转到某一个id叫s的位置上
<a href=”javascript:;”> 取消刷新页面的功能
拓展
字符串拼接和Dom创建都是渲染的方式
字符串拼接
优点 简单,层次感强,可以处理大量数据
缺点:字符串拼接会影响到原有子元素的事件
Dom创建
优点:是一个独立的个体,不会影响到原有的元素
缺点:处理数据量过大会比较麻烦,会造成DOM回流。
Dom回流
页面渲染时,我们对html结构简单的增删查改时,浏览器会对所有的dom进行重新排列,这就是Dom回流,严重影响浏览器的性能。
补充
提升页面性能优化
- 多采用雪碧图
- 阻止超链接的默认行为
- 减少Dom回流
- 减少向服务器请求的次数
js···DOM2动态创建节点的更多相关文章
- js如何动态创建表格(两种方法)
js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...
- Dom 获取、Dom动态创建节点
一.Dom获取 1.全称:Document Object Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...
- JS动态引入js,CSS——动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...
- js/jq动态创建表格的行与列
之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...
- js原生动态创建表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- delphi dom动态创建节点方法
在一次测试demo中 需要动态的创建xml节点并添加,实现方法如下: var NewItem:IXMLDOMElement; NewItem:=ConfigDoc.createElement('ite ...
- JS/JQ动态创建(添加)optgroup和option属性
JavaScript和Jquery动态操作select下拉框 相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中.因为之前牵扯到optgroup标签时遇到了 ...
- js的传值,table中tr的遍历,js中动态创建数组
1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...
- 11-15 dom 动态创建节点
1.生成节点的方法 document.createElement(“div”) 2.插入节点的方法 父元素.appendChild(新节点) 在父节点中的子节点后面插入新的节点 3.在指定的位置 ...
随机推荐
- LAMP分离搭建WordPress
实验环境:centos6.5 php5.3.6 http2.4.35 yum安装mysql 关闭三台主机的Selinux.iptalbes 配置apache: 解压软件包 安装依赖包:pcre-dev ...
- Java调用第三方接口工具类(json、form)
1.JSON值访问 /** * 调用对方接口方法 * @param path 对方或第三方提供的路径 * @param data 向对方或第三方发送的数据,大多数情况下给对方发送JSON数据让对方解析 ...
- 洛谷P1073 最优贸易
题面要求的是一个差值,即走过一条路径能找到的路径上最大值-最小值. 那么相当于跑一遍最长路和一遍最短路,当然不是概念上的最长路最短路,这里把dis[v]的松弛改成用路径上传递来的最大/最小值维护,而不 ...
- java AQS(AbstractQueuedSynchronizer)同步器详解
除了内置锁(synchronized)外,java AQS(AbstractQueuedSynchronizer)同步器几乎是所有同步容器,同步工具类的基础.ReentrantLock.Reentra ...
- P5016 龙虎斗 题解
这题真是*到家了QAQ 我在考场上调了将近75min,总算过了大样例. 首先,我们可以简化这一题,这道题的本质就是让我们找出一个点p2,往那个点上面加上s2个单位的重量,使得以m为中的两边的权值和的差 ...
- SQL-53 按照dept_no进行汇总,属于同一个部门的emp_no按照逗号进行连接,结果给出dept_no以及连接出的结果employees
题目描述 按照dept_no进行汇总,属于同一个部门的emp_no按照逗号进行连接,结果给出dept_no以及连接出的结果employeesCREATE TABLE `dept_emp` (`emp_ ...
- selenium的定位方式
1.selenium的定位方式 selenium有18种定位方式,8种单数,8种复数,2种父类 2.8种单数定位方式 from selenium import webdriverimport time ...
- 淘宝的推荐系统 计算之道2A
小明刚刚入职淘宝,老大给他交代了一个简单的任务,实现一个简易的商品推荐系统. 这个商品推荐系统的需求如下: 一共有 n 件商品可以被推荐,他们的编号分别为 1 到 n.每件商品都有一个价格,编号为 i ...
- linux服务器升级nginx
1.简介 有时候nginx发布了新BUG或者添加了新的功能时,想要更新的时候服务又不能中断,这时候就要用到nginx的平滑升级了. 该脚本同样适用于添加新扩展,添加新扩展的时候只需要把更新的版本修改为 ...
- 芯片烧录器编程AT24C02
网上买了两款芯片烧录器,因为项目用的到.芯片以后的类型可能是IIC 接口的.就选则了一个IIC接口的AT24C02EEPROM.进行尝试.手头上没有这款芯片. 就想起自己单片机上有这款芯片.然后就开始 ...