在网页中，使用JavaScript动态创建元素的方式有三种：

1.document.write()

2.Element.innerHTML

3.document.createElement()

在上述三种方法中，最常用最常用的是第三种方法，本文依托小例子，对三种方法加以总结。

案例：点击按钮 生成列表，鼠标放上高亮显示的效果

效果图：

页面内容：

<input type="button" value="按钮" id="btn">
<div id="box"></div>

一、document.createElement()

1.利用document.createElement()创建一个节点

2.设置创建节点的属性

3.把创建的节点利用父Element.appendChild(子element)方法添加至父节点

下述demo中需要细细体会的细节：

①鼠标移出和鼠标移入事件为什么要那样写，放在循环外面

②innerText兼容性处理问题

代码如下：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>点击按钮 动态创建列表，鼠标放上高亮显示</title>

     </head>

     <body>

         <input type="button" value="按钮" id="btn">

         <div id="box"></div>

         <!-- 插入JS代码 -->

         <script>

             var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];//数据源

             //获取按钮节点

             var btn=document.getElementById('btn');

             //给按钮节点注册事件

             btn.onclick = function() {

                 // 动态创建ul，内存中创建对象

                 var ul = document.createElement('ul');

                 // 把ul 放到页面上(即给div添加ul)

                 var box=document.getElementById('box');

                 box.appendChild(ul);

                 //遍历数据集,常见li标签

                 for (var i = 0; i < datas.length; i++) {

                     var data = datas[i];

                     // 在内存中动态创建li

                     var li = document.createElement('li');

                     // 把li添加到DOM树，并且会重新绘制

                     ul.appendChild(li);

                     // 设置li中显示的内容

                     // li.innerText = data;

                     //注意:不按照上面方式写,因为innerText存在浏览器兼容性问题,对于

                     //不支持innerText的浏览器,返回值undefined,支持innerText的浏览器,返回string

                     //所以定义函数setInnerText,用以处理浏览器兼容性问题

                     setInnerText(li, data);

                     // 给li注册事件

                     //注意:此处直接写li.onmouseover=function(){}大有深意

                     //因为function在一个循环中,每循环一次,创建一个function,在内存中存储一次

                     //再循环一次,在内存中再创建一个function

                     //循环多少次,内存中存储多少个function,消耗内存

                     //故一般将这种函数放在外面定义.

                     li.onmouseover = liMouseOver;

                     li.onmouseout = liMouseOut;

                 }

             }

             // 定义函数，设置标签之间的内容,主要为处理浏览器兼容性问题

             function setInnerText(element,content){

                 if(typeof(element.innerText)==='string'){

                     element.innerText=content;

                 }else{

                     element.textContent=content;

                 }//部分浏览器支持元素的innerText,部分仅仅使用textContent

             }

             // 当鼠标经过li的时候执行

             function liMouseOver() {

                 // 鼠标经过高亮显示

                 this.style.backgroundColor = 'red';

             }

             function liMouseOut() {

                 // 鼠标离开取消高亮显示

                 this.style.backgroundColor = '';

             }

         </script>

     </body>

 </html>

二、Element.innerHTML

innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。

可以借助字符串或数组的方式进行替换，再设置给innerHTML

优化后与document.createElement性能相近

代码如下：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>Document</title>

     </head>

     <body>

         <input type="button" value="按钮" id="btn">

         <div id="box"></div>

         <script>

             // 点击按钮 生成列表，鼠标放上高亮显示的效果

             // 模拟数据

             // var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];

             // var btn = document.getElementById('btn');

             // btn.onclick = function () {

             //   var box = document.getElementById('box');

             //   box.innerHTML = '<ul>';  // 重新绘制

             //   // 遍历数据

             //   for (var i = 0; i < datas.length; i++) {

             //     var data = datas[i];

             //     box.innerHTML += '<li>' + data + '</li>';   // 重新绘制

             //   }

             //   // box.innerHTML = box.innerHTML + '</ul>'

             //   box.innerHTML += '</ul>';  // 重新绘制

             // }

             //

             //

             // 优化1

             // var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];

             // var btn = document.getElementById('btn');

             // btn.onclick = function () {

             //   var box = document.getElementById('box');

             //   var html = '<ul>';    // 重新开辟内存 需要耗费时间

             //   // 遍历数据

             //   for (var i = 0; i < datas.length; i++) {

             //     var data = datas[i];

             //     html += '<li>' + data + '</li>';    // 因为字符串不可变 重新开辟内存 需要耗费时间

             //   }

             //   html += '</ul>';   // 因为字符串不可变 重新开辟内存 需要耗费时间

             //   box.innerHTML = html;   // 重新绘制

             // }

             // 优化2

             var datas = ['西施', '貂蝉', '凤姐', '芙蓉姐姐'];

             var btn = document.getElementById('btn');

             btn.onclick = function() {

                 var box = document.getElementById('box');

                 // 使用数组替代字符串拼接

                 var array = [];

                 array.push('<ul>');

                 // 遍历数据

                 for (var i = 0; i < datas.length; i++) {

                     var data = datas[i];

                     array.push('<li>' + data + '</li>');

                 }

                 array.push('</ul>');

                 box.innerHTML = array.join('');

                 // 当li 生成到页面之后，再从页面上查找li 注册事件

             }

         </script>

     </body>

 </html>

使用上述方法，需要对该方法的使用不断优化，比较麻烦，而且在高亮显示时候，需要在所有元素绘制到DOM树上后，重新开始注册事件，所以上述方法不推荐使用

三、document.write()

当点击按钮的时候使用document.write()输出内容，会把之前的整个页面覆盖掉，更加不推荐使用。

JavaScript--动态添加元素的更多相关文章

  1. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js 动态添加元素（div、li、img等）及设置属性

    把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点 ...

  3. jQuery动态添加元素事件

    在项目中遇到需要jQuery动态添加元素的事件,做了一个demo,方便以后遇到相同的问题可以用上: <!DOCTYPE html> <html> <head> &l ...

  4. jqueryMobile 动态添加元素，展示刷新视图方法

    jqueryMobile动态添加元素jqueryMobile郏高阳 jQuery Mobile的是一个很好的移动开发框架,你可能已经知道,虽然它有很多难以解决的问题,但是我相信后续版本jquery会修 ...

  5. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  6. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  7. Jquery Mobile 动态添加元素然后刷新 转

    Jquery Mobile 动态添加元素然后刷新 (2013-05-09 12:39:05) 转载▼ 标签: it 分类: Mobile jquery 表单元素每一个元素都有自己刷新的方法,每当改变它 ...

  8. Javascript动态调整文章的行距、字体、颜色，及打印页面和关闭窗口功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquerymobile动态添加元素之后不能正确渲染解决方法

    jquerymobile动态添加元素之后有些不能被正确渲染的解决方法: listview:               添加 jq(".detail").listview(&quo ...

  10. Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同

    我们有时会通过ajax动态获取一段Html代码,并且将这段代码通过javascript放到页面的Dom结构中去. 而很多时候通过ajax动态获取的Html代码中也包含javascript代码,有一点需 ...

随机推荐

  1. jQuery之检测分析纠错------地狱的镰刀

    1. 答: 或者: $(selector).eq(0).hide(); 解答:get() 方法获得由选择器指定的 DOM 元素. 2. 答: 3, 答1: 答2: 4. slideDown()方法格式 ...

  2. js数组插入指定位置元素，删除指定位置元素，查找指定位置元素算法

    将元素x插入到顺序表L(数组)的第i个数据元素之前 function InsertSeqlist(L, x, i) { // 将元素x插入到顺序表L的第i个数据元素之前 if(L.length == ...

  3. 16_AOP入门准备_Jdk动态代理模式

    [工程截图] [PersonDao.java] package com.HigginCui.daoProxy; //目标类接口 public interface PersonDao { public ...

  4. win10安装mxnet cuda9.0-gpu版

    类似于上一篇文章 Anaconda3.6    python3.6.5   cuda9.0+   cudnn7.0 安装MXNet 1.设置清华源 conda config --prepend cha ...

  5. 再学UML-Bug管理系统UML2.0建模实例（三）

    3．系统设计 在对系统进行全面分析后,我们开始使用UML对系统进行设计,构造BMS系统的设计模型,包括类图.包图.顺序图(实现模型).组件图和部署图等的绘制,回答了“怎么做”的问题.具体设计工作如下: ...

  6. ANT 的Table表格样式修改方法

    注:(大家在给页面添加参数或者方法的时候,记得写上注释,方便别人查看) 1.表格行选中样式添加:(可以去beijing,精子库质控统计查看例子) (咱们以前页面上的表格都是在hover时显示选中效果, ...

  7. 数据结构与算法分析java——散列

    1. 散列的概念 散列方法的主要思想是根据结点的关键码值来确定其存储地址:以关键码值K为自变量,通过一定的函数关系h(K)(称为散列函数),计算出对应的函数值来,把这个值解释为结点的存储地址,将结点存 ...

  8. python 带BOM头utf-8的响应解码

    接口响应编码格式为带BOM头utf-8.直接获取响应的text出现乱码. '''dinghanhua2018-11requests text与content,指定响应的encoding''' api ...

  9. BZOJ4538:[HNOI2016]网络(树链剖分,堆)

    Description 一个简单的网络系统可以被描述成一棵无根树.每个节点为一个服务器.连接服务器与服务器的数据线则看做 一条树边.两个服务器进行数据的交互时,数据会经过连接这两个服务器的路径上的所有 ...

  10. springboot（服务端接口）获取URL请求参数的几种方法

    原文地址:http://www.cnblogs.com/xiaoxi/p/5695783.html 一.下面为7种服务端获取前端传过来的参数的方法  常用的方法为:@RequestParam和@Req ...