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回流,严重影响浏览器的性能。

补充

提升页面性能优化

  1. 多采用雪碧图
  2. 阻止超链接的默认行为
  3. 减少Dom回流
  4. 减少向服务器请求的次数

js···DOM2动态创建节点的更多相关文章

  1. js如何动态创建表格(两种方法)

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  2. Dom 获取、Dom动态创建节点

    一.Dom获取 1.全称:Document     Object     Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...

  3. JS动态引入js,CSS——动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...

  4. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

  5. js原生动态创建表格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. delphi dom动态创建节点方法

    在一次测试demo中 需要动态的创建xml节点并添加,实现方法如下: var NewItem:IXMLDOMElement; NewItem:=ConfigDoc.createElement('ite ...

  7. JS/JQ动态创建(添加)optgroup和option属性

    JavaScript和Jquery动态操作select下拉框 相信在前端设计中必然不会少的了表单,因为经常会使用到下拉框选项,又或是把数据动态回显到下拉框中.因为之前牵扯到optgroup标签时遇到了 ...

  8. js的传值,table中tr的遍历,js中动态创建数组

    1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...

  9. 11-15 dom 动态创建节点

    1.生成节点的方法  document.createElement(“div”) 2.插入节点的方法   父元素.appendChild(新节点) 在父节点中的子节点后面插入新的节点 3.在指定的位置 ...

随机推荐

  1. jsp页面<%@ page报错问题

    eclipse中的web项目jsp页面<%@报错如下图所示: 解决办法: 在项目上右键→ Build Path → Configure Build Path... Libraries → add ...

  2. 【js高程学习笔记】Object类型

    创建一组Object的实例的方式有两种: 方法一: var person = new Object(); person.name = '团子'; person.race = '猫'; person.s ...

  3. 考研计算机复试(广东工业大学C语言复试2014~2017笔试题)(精华题选)

    1.C语言中,全局变量的存储类别是() A.extern B.void C.int   D.static 2.静态变量: (1)static 外部变量===>在函数外定义,只能在本文件中使用 ( ...

  4. C++之 自定义数据类型 枚举、结构体、共用体

    1.枚举 枚举类型的声明形式为:   enum  枚举类型名   {  变量值列表 };    变量值列表里都是整型变量,另外不要忘记最后面的分号! 比如,enum  weekday   { sun, ...

  5. ORACLE一个TNS配置错误

    oracle tns配置文件格式如下 RSXT = (DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = 10.26.3. ...

  6. 马凯军201771010116《面向对象与程序设计Java》第十周学习总结

    一.理论知识学习部分 泛型类的约束与局限性: 不能用基本类型实例化类型参数 运行时类型查询只适用于原始类型 不能抛出也不能捕获泛型类实例 参数化类型的数组不合法 不能实例化类型变量 泛型类的 ...

  7. 马凯军201771010116《面向对象与程序设计Java》第九周学习总结

    一.理论知识部分 异常.日志.断言和调试 1.异常:在程序的执行过程中所发生的异常事件,它中断指令的正常执行. 2.Java的异常处理机制可以控制程序从错误产生的位置转移到能够进行错误处理的位置. 3 ...

  8. Holer实现oracle数据库外网访问

    外网访问内网Oracle数据库 内网主机上安装了Oracle数据库,只能在局域网内访问,怎样从公网也能访问本地Oracle数据库? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安 ...

  9. axis2设置soap1.1或soap1.2协议

    现在Axis.Axis2都是同时支持SOAP1.1和SOAP1.2的.即在服务器端发布一个WebService服务之后,客户端既可以通过SOAP1.1版本来访问服务器的服务,也可以通过SOAP1.2版 ...

  10. 运维seq语法

    seq-print a sequence of numbers 用于产生从某个数到另外一个数之间的所有整数 语法:seq 开始列  指定步长  结束列 参数: -f :指定输出格式,允许使用print ...