每天都有新发现——如何优雅的用js动态添加html代码
时间：
2015-07-18 17:00:15
阅读：
408
评论：
收藏：
0
[点我收藏+]
标签：
每天都有新发现——如何优雅的用js动态添加html代码###如何优雅的用js动态的添加html代码
>[原文](http://segmentfault.com/q/1010000000312781&sa=U&ei=r2deU9qOGM6iyAS79YHIDg&ved=0CGMQFjAK&usg=AFQjC)感谢Tychio提供的答案。
###三种方案：
1.使用DOM
????//使用createElement创建元素
????var?dialog?=?document.createElement(‘div‘);
????var?img?=?document.createElement(‘img‘);
????var?btn?=?document.createElement(‘input‘);
????var?content?=?document.createElement(‘span‘);
????//?添加class
????dialog.className?=?‘dialog‘;
????//?属性
????img.src?=?‘close.gif‘;
????//?样式
????btn.style.paddingRight?=?‘10px‘;
????//?文本
????span.innerHTML?=?‘您真的要GG吗？‘;
????//?在容器元素中放入其他元素
????dialog.appendChild(img);
????dialog.appendChild(btn);
????dialog.appendChild(span);
????
>关于添加class如果不考虑IE兼容性问题，可以使用classList方法，详细[API在这里](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)。还有很多方法?????用于DOM操作，在[这里](http://www.w3school.com.cn/htmldom/dom_methods.asp)。
2.使用HTML5?template标签
????
????
??????
????????![技术分享]()
????????
????????
?????? ????
>接着还是得使用DOM操作，只是不需要创建元素了，然后复制一份副本放入正文即可。
????var?dialog?=?document.querySelector(‘#dialog_tpl‘);
????dialog.content.querySelector(‘img‘).src?=?‘close.gif‘;
????dialog.content.querySelector(‘span‘).innerHTML?=?‘您真的要GG吗？‘;
????document.body.appendChild(dialog.content.cloneNode(true));
????
>template标签是隐藏的，最多是用在列表中，可以产生多个副本。详细使用方法可以参考[这篇文章](http://www.html5rocks.com/en/tutorials/webcomponents/template/?redirect_from_locale=zh)。如果要兼容不支持template的浏览器，可以把content的部分写一个兼容方法，并且把template用CSS隐藏掉即可。
3.使用HTML模板
>[这里](https://developer.mozilla.org/en-US/docs/JavaScript_templates)有各种模板，并且按语法风格分类。其实模板大同小异，就是动态修改模板文件使之成为一个可用的静态HTML文件，其实你也可以自己在需要的地方加载一部分HTML。只需要使用ajax请求一个情态的HTML文件并把返回的HTML代码放入当前的HTML中即可。
每天都有新发现——如何优雅的用js动态添加html代码
标签：
原文地址：http://www.cnblogs.com/Zjingwen/p/4657127.html
