在网页中，使用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. HTML 5中的新特性

    HTML 5中的新特性 html5新增了一些语义化更好的标签元素.首先,让我们来了解一下HTML语义化. 1.什么是HTML语义化? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开 ...

  2. 初入门 HTML

    ---恢复内容开始--- 1.h标签(标题标签) h1~h62.br标签(换行标签) <br/>3.hr标签(水平线标签) <hr/>4.strong(加粗) em(倾斜)5. ...

  3. Android 环信聊天头像昵称显示解决方案

    从消息扩展中获取昵称和头像 昵称和头像的获取:把用户基本的昵称和头像的URL放到消息的扩展中,通过消息传递给接收方,当收到一条消息时,则能通过消息的扩展得到发送者的昵称和头像URL,然后保存到本地数据 ...

  4. html网页访问WebAPI中的方法遇到的问题

      1.移动端访问远程服务时,建议使用WebAPI 2.用不同浏览器访问WebAPI时返回的文本格式是不同的,Chrome Firefox将在浏览器中以XML形式显示此列表,IE浏览器将获得Json格 ...

  5. 在浏览器的市场上，IE依然是放弃了，firefox还在继续~~

    自从微软失败后,发布了Edge:但是依然是没有多少市场的,毕竟各种难受: 单从开发者工具,我是没有其它选择了, ie的不能用,https://www.microsoft.com/en-us/welco ...

  6. 模拟精灵 z

    反复做历史测试,重大改进了卖出的判断模式.此项改进能使系统收益每年增加5%-左右 重新整合了几种买法,使之在熊市更加谨慎.对大盘的反转反应更为灵敏 适当加大了仓位 单独处理有重大机会的股票 加入多种短 ...

  7. 多设备同时安装apk（安卓）

    前几天在做安卓设备的多个设备同时安装的小脚本.因为目前我这边设备有点多,想顺便做一下安装的测试.而且因为公司的app测试人手上有点不足,就想通过这个办法去在安装的时候更方便省事一点. 本来是想弄个复杂 ...

  8. JSP简要

    本篇知识导图 说起JSP,当年做课程设计什么的都用的这个,虽然技术比较古老,但是还是挺广泛使用的. JSP是一种前台的展现语言,在mvc里面属于表现层.它主要由静态,动态两部分组成,静态包括HTML, ...

  9. Exchange 2016中的削减内容

    一.从Exchange 2013到Exchange 2016所废弃的功能. 在Exchange 2016中已经有部分Exchange 2013的功能不在提供支持. 1.体系结构 功能 注释和缓解操作 ...

  10. HTTPS科普（转）

    为什么需要https HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都可以知道你们传输的内容是什么.这些节点可能是路由器.代理等. 举个最常见的例子,用户登陆.用户输入账号,密码, ...