在网页中，使用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. Python爬虫之图片懒加载技术、selenium和PhantomJS

    一.引入 2.概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 3.回顾 验证码处理流程 一.今日详情 动态数据加载处理 1.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素 ...

  2. H5新特性-----WebSocket

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 W ...

  3. 今日头条极速版邀请码以及其它APP邀请码大全

    现在大多手机新闻APP都需要输入码,在网上找了很久,最终找到一个比较全的文章,本人试过,都是可以使用的! 第1个比较好,可边看新闻,边收益!嘻嘻!平时写代码累了,休息刷一下!或者在睡觉前刷新一下,每天 ...

  4. 【Linux】Linux 找回Root用户密码

    Root密码破解 Linux 忘记Root密码 ? 技术学习基本原则:不作恶 一.破解步骤 1.在系统启动时进入grub选项菜单 2.在grub选项菜单按e进入编辑模式 3.编辑kernel那行添加/ ...

  5. html-表单的设计

    一.表单的设计 1.注册表单页面 <html> <head> <title>表单的练习</title> <script> function ...

  6. 深入JDK源码，这里总有你不知道的知识点！

    Java的基础知识有很多,但是我认为最基础的知识应该要属jdk的基础代码,jdk的基础代码里面,有分了很多基础模块,其中又属jdk包下面的lang包最为基础. 我们下面将总结和分析一下lang包下面最 ...

  7. JS入口函数和JQuery入口函数

    首先,讲一下它们的区别: (1)JS的window.onload事件必须要等到所有内容,以及外部图片之类的文件加载完之后,才会去执行. (2)JQuery入口函数是在所有标签加载完之后,就会去执行. ...

  8. June 10th 2017 Week 23rd Saturday

    A lot of things, we can be touched, but we can not shed tears. 很多事情,我们可以感动,却不能流泪. Sometimes I was to ...

  9. March 17 2017 Week 11 Friday

    Simplicity is the ultimate sophistication. 简约才是精巧到了极致. Recently I have spent a great number of time ...

  10. 使用SAPGUI画图

    国内80后上的编程课应该都学过Logo这门编程语言: Logo语言是一门专门设计用来进行编程教学的语言,于1967年由Wally Feurzeig, Seymour Papert和Cynthia So ...