在网页中，使用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. stroke和fill顺序对绘图的影响

    用canvas绘制线条和填充,fill()和stroke()调用顺序直接影响绘制的结构 先调用stroke在调用fill,绘制的效果看上去lineWidth只绘制出来一半,还以为是个大问题. < ...

  2. 纯css 简单网页

    <div id="wrapper"> <header> <section> <h1>Web Design<h1> < ...

  3. window.frames在不同浏览器中的用法

    document.frames 等同于 window.frames,用来取得当前页面内 window 对象的集合. 不支持Firefox,其他浏览器(chrome.opera.IE.360)均支持. ...

  4. linux搭建nginx图片服务器

    1:参考http://blog.csdn.net/u012401711/article/details/53525908

  5. javax.servlet.ServletException: java.lang.NoClassDefFoundError: javax/el/ELResolver错误解决办法

    今天不用eclipse.myeclipse等开发工具,纯手写JSP页面(有点作死)时突然出现以前从来没遇到过的问题,报错如下: HTTP Status 500 - java.lang.NoClassD ...

  6. struts-config.xml 中 action 与 forward 的重要属性

    1.forward 的 redirect 可以为true.false(默认).yes.no true和yes一样,false和no一样: redirect="false",容器内跳 ...

  7. Linux下创建vue项目

    前提:已经安装了node.js.cnpm 1.全局安装vue脚手架vue-cli:#cnpm install -g vue-cli 注意:全局安装没有建立软链接前是无法使用刚刚安装的vue命令的,所以 ...

  8. C#转Java之路之二：多线程原子变量

    多线程操作会带来不一致性,为了实现一直性.我们可以用关键字:synchronized同步对象或者volatile轻量级.内存可见性. 两个关键字使用对比: 1.synchronized比较重,属于悲观 ...

  9. SVN cleanup 反复失败解决办法

    svn cleanup cleaning up 操作反复失败,svn提示的问题是版本需要更新,更新成最新的版本之后,依旧反复失败,陷入死循环.还好找一个blog上的方法试了一下,成功了. 先说故障环境 ...

  10. HDU 6070 线段树

    题意:求AC率,x/y 的最小值,x是区间数字的种类数,y是区间的长度. 分析: 二分答案比率.ans, 动态插入结点,一些区间的size会发生变化,是那些前面暂时没有新的结点的区间 size + 1 ...