问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如果需要在js里动态的加载一些html代码，一般会选择下面这样的方式
str="&div class="dialog"&&div class="title"&&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条&/div&&div class="content"&&img src="delete.jpg" alt="" /&&span&您真的要GG吗？&/span&&/div&&div class="bottom"&&input id="Button2" type="button" value="确定" class="btn"/&&&&input id="Button3" type="button" value="取消" class="btn"/&&/div&&/div&"
但是感觉这样太丑了，可读性和可维护性都很差。有什么更加优雅和简洁的方式吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
把你想要的结构写在HTML里，用一个display：none的标签来包裹，一般而言，会使用：
不设置为type="text/javascript"的script标签
textarea标签
&script type="text/html" id="theTemplate"&
&div class="dialog"&&div class="title"&&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条&/div&&div class="content"&&img src="delete.jpg" alt="" /&&span&您真的要GG吗？&/span&&/div&&div class="bottom"&&input id="Button2" type="button" value="确定" class="btn"/&&&&input id="Button3" type="button" value="取消" class="btn"/&&/div&&/div&
&textarea id="theTemplate" style="display:none"&
&div class="dialog"&&div class="title"&&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条&/div&&div class="content"&&img src="delete.jpg" alt="" /&&span&您真的要GG吗？&/span&&/div&&div class="bottom"&&input id="Button2" type="button" value="确定" class="btn"/&&&&input id="Button3" type="button" value="取消" class="btn"/&&/div&&/div&
&/textarea&
使用这些标签，是为了避免这些不被直接使用的标签一被浏览器读取到就被渲染。而且这样做的话，里面的img的src也不会被浏览器自动获取。
如果你使用script标签，就可以如下代码得到它：
//使用script包裹
var template = document.getElementById("theTemplate").innerHTML ;
//使用textarea包裹
var template = document.getElementById("theTemplate").
使用时textarea时要注意，textarea无法嵌套自身；script标签也无法自嵌套。
但如果文档结构是固定的，里面的数据需要动态填充呢？请参考。
P.S. 对于innerHTML和value的使用可能会造成XSS。
动态添加HTML代码，前端若由模板导出，在JS里面写结构，或者在HTML里面写结构，这个结构对于黑客来说都是白盒的，白盒攻击相对简单，黑客可以通过阅读代码来看到哪一些代码可以被利用。比如$用户签名$，发现这里的用户签名是用户可控制的数据之后，黑客可以构造一个&img src="javascript:window.open()"&之类的用户签名，未经过滤&>的话，就可以做到XSS。
因此，在里讲到的方案中，通过json进行动态匹配替换时，一定要保证后端输出的数据JSON里，&、&等语义敏感的字符正确转义。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
"first": "Michael",
"last": "Jackson"
"age": "RIP"
*** {{name.first}} {{name.last}}
* {{age}}**
* Michael Jackson
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
三种方案：
// 使用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方法，详细。
还有很多方法用于DOM操作，在。
使用HTML5 template标签
&template id="dialog_tpl"&
&div class="dialog"&
&img src="" alt=""&
&input type="button" value="确认"&
&span&&/span&
&/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标签是隐藏的，最多是用在列表中，可以产生多个副本。详细使用方法可以参考。如果要兼容不支持template的浏览器，可以把content的部分写一个兼容方法，并且把template用CSS隐藏掉即可。
使用HTML模板
有各种模板，并且按语法风格分类。其实模板大同小异，就是动态修改模板文件使之成为一个可用的静态HTML文件，其实你也可以自己在需要的地方加载一部分HTML。只需要使用ajax请求一个情态的HTML文件并把返回的HTML代码放入当前的HTML中即可。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用javascript预编译模版。
我使用的是ejs，非常简单的库，几分钟看一下文档，立刻就能上手用。
国内的话还有artdialog的作者写的artTemplate，据说是最快的预编译模版。
这里有性能测试，优势十分明显：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我用的是。
可读性一等一的好。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果不需要引入模版文件的依赖关系并保持HTML结构的可读性，我推荐楼主使用CoffeeScript。
为什么CoffeeScript可以解决楼主提出的问题呢？
因为它支持类似于Python的跨行字符串，这样很轻易的就能保持HTML结构的可读性，而不需要使用“+”或者采用拼数组的形式。
同时跨行字符串还支持嵌入变量和表达式，类似与PHP和Ruby的双引号。这样就避免了引入外部模版。
所以楼主的代码在CoffeeScript里面就变成了这样：
&img src=#{item.href} /&
上面的代码在WebStorm和Sublime Text中都可以得到很好的格式化支持，详细的使用例子可以看。
CoffeeScript绝对是一个值得JavaScript爱好者投资的技术，有了它你甚至都能感觉到你写下的不是一行行的代码，而更像一行行的诗歌，每一行都那么地简洁和优雅。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我正在研究这个链接的方法（肯定是可以的）：
我正研究着，做成 qq分组的那种效果。以上链接的内容可以完成你要的效果。
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知& & addinput.js& & //======================& & //功能:在表单中input file控件& & //参数:parentID---要插入input file控件的父元素ID& & // inputID----input file控件的ID,这个一定要和name保持一致的，否则会出问题& & // maxNum --- 最大数量 0为不限制& & //======================& & function createInput(parentID,inputFileID, maxNum){& & if (maxNum > 0) {& & x=document.getElementsByName(inputFileID);& & y=x.& & if (y >= maxNum) {& & alert('最多只允许添加' + maxNum + '个');& && & }& & }& & var parent=$G(parentID);//获取父元素& & var div=document.createElement("div");//创建一个div容器tb用于包含input file& & var x=parseInt(Math.random()*(80-1))+1;& & var divName=inputFileID+x.toString();//随机div容器的名称& & div.name=divN& & div.id=divN& & var aElement=document.createElement("input"); //创建input& & aElement.name=inputFileID;& & aElement.id=inputFileID;& & aElement.type="text";//设置类型为file& & aElement.className = "dynInputLen";& & var delBtn=document.createElement("input");//再创建一个用于删除input file的Button& & delBtn.type="button";& & delBtn.value=" ";& & delBtn.className = "btn_del";& & delBtn.onclick=function(){ removeInput(parentID,divName)};//为button设置tbonclick方法& & div.appendChild(aElement);//将input file加入div容器& & div.appendChild(delBtn);//将删除按钮加入div容器& & parent.appendChild(div);//将div容器加入父元素& & }& & //============================& & //功能:删除一个包含input file的div 容器& & //参数:parentID---input file控件的父元素ID& & // DelDivID----个包含input file的div 容器ID& & //============================& & function removeInput(parentID,DelDivID){& & var parent=$G(parentID);& & parent.removeChild($G(DelDivID));& & }& & //通过元素ID获取文档中的元素& & function $G(v){return document.getElementById(v);}& & 在html里引入addinput.js文件.html代码如下：& & & & & & & & & & & & 可以设定最多可以添加多少个input,如果设置为0的话，则表示不限制数量。& & 作者：tbwshc
声明：该文章系网友上传分享，此内容仅代表网友个人经验或观点，不代表本网站立场和观点；若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
上一篇：下一篇：
相关经验教程
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.004 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益&&&&JS动态添加删除HTML元素(实例)
JS动态添加删除HTML元素(实例)
JS动态添加删除HTML元素(实例)兼容性比较不错的js代码示例
嵌到我的页面
<input type="text" readonly="true" value="">
若举报审核通过，可奖励20下载分
被举报人：
zhaoqismile
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
开发技术下载排行Jquery 怎么获取动态生成的html元素，然后给其中的元素添加样式? - JQuery问答 - 大学IT网
当前位置: >
> Jquery 怎么获取动态生成的html元素，然后给其中的元素添加样式?
这是其中界面的js代码，主要去了异步去后台加载数据，然后动
态写li元素及里边的a元素
url: "home!subMenu",
typ:"post",
datatype:"json",
data:{"fatherId":${request.fatherId}},
success:function(data)
if(data.success)
var json = eval(data);
var menu = json.
var html ="&li class='space'&&/li&";
$.each(menu,function(i,item)
html=html+"&li&&a href='javascript:;' hint='merchant' action='"+item['url']+"?fatherId="+item['fatherId']
+"' class='merchantmenu'&" +item['text']+"&/a&&/li&"
$("#merchantSubMenu").append(html);
art.dialog(data.message);
document.location.href="home!gotoIndex";//跳转到首页
$('a[class="merchantmenu"]').each(function(){
alert("test");//这里进不来。。。。
我现在想要获取这个li列表的第一个元素给添加样式。&
现在的问题 通过选择器获取不到，是ajax异步加载还没写进去吗？
ajax是异步的，你那个方法和ajax在同一级，ajax还没接到返回结果，就已经执行了你那个方法了，你把那个遍历的方法放到$("#merchantSubMenu").append(html); & 后面。
其他类似问题
该问题已停止回答,谢谢您的关注^_^当前位置 &
用JS函数动态添加CSS样式表
　先给出函数。
var addSheet = function(){
var doc,cssC
if(arguments.length == 1){
cssCode = arguments[0]
}else if(arguments.length == 2){
&doc = arguments[0];
cssCode = arguments[1];
alert(&addSheet函数最多接受两个参数!&);
if(!+&\v1&){//增加自动转换透明度功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜
&var t = cssCode.match(/opacity:(\d?\.\d+);/);
&if(t!= null){
&cssCode = cssCode.replace(t[0], &filter:alpha(opacity=&+ parseFloat(t[1]) * 100+&)&)
& cssCode = cssCode + &\n&;//增加末尾的换行符，方便在firebug下的查看。
&var headElement = doc.getElementsByTagName(&head&)[0];
var styleElements = headElement.getElementsByTagName(&style&);
if(styleElements.length == 0){//如果不存在style元素则创建
& if(doc.createStyleSheet){&&& //ie
&&& doc.createStyleSheet();
&var tempStyleElement = doc.createElement('style');//w3c
&& tempStyleElement.setAttribute(&type&, &text/css&);
&headElement.appendChild(tempStyleElement);
var& styleElement = styleElements[0];
&var media = styleElement.getAttribute(&media&);
&if(media != null && !/screen/.test(media.toLowerCase()) ){
& styleElement.setAttribute(&media&,&screen&);
&if(styleElement.styleSheet){&&& //ie
&&& styleElement.styleSheet.cssText += cssC
&}else if(doc.getBoxObjectFor){
& styleElement.innerHTML += cssC//火狐支持直接innerHTML添加样式表字串
& styleElement.appendChild(doc.createTextNode(cssCode))
有时我们需要在.js文件对文档动态引入一些CSS样式。对于一些短小的CSS代码来说，这好办，我们可以调用其style方法，如
var ddd = document.getElementById(&ddd&);
ddd.style.border = &1px solid red&;
如果再长一点也无所谓：
var ddd = document.getElementById(&ddd&);
ddd.style.cssText = &border:1color:#000;background:#444;float:left&;
本人而言，我是喜欢后者。因为前者有严重的兼容问题。如float这个样式，在IE是styleFloat，在火狐等W3C标准游览器是cssFloat。而cssText则是通吃。
如果很长，我们可以动态导入一CSS文件。如
function addSheetFile(path){
var fileref=document.createElement(&link&)
fileref.rel = &stylesheet&;
fileref.type = &text/css&;
fileref.href =
fileref.media=&screen&;
var headobj = document.getElementsByTagName('head')[0];
headobj.appendChild(fileref);
这个函数在IE中有点累赘。我向来是支持哪个游览器就用哪个游览器的原生函数，直接使用二进制代码效率最高。
1.var oStylesheet = document.createStyleSheet ( sURL , iIndex );
createStyleSheet带的两个参数都是可选的。
但如果我们的样式是某个页面独有的，而且只有管理员才能使用到，而且那部分页面是动态生成的，我们需要一开始就引入它吗？需要特意弄个文件来装载它吗？最好的方法让这些样式与动态脚本捆绑在一起。我这个函数就为此而开发的。
坦白说，它最开始是为富文本编辑器而开发的。大家都知道，富文本输入框最流行的做法是把要输入的内容放到iframe中，这就涉及到两种 document，一个主页面的document，另一个是iframe的document。 iframe的document又涉及到兼容问题。我们可以：
var iframe = document.createElement('iframe');//生成用于编辑的rich text editor
var iframeDocument = iframe.contentDocument || iframe.contentWindow.
嘛，扯远了。总而言之，函数最开始的判定就是为这两种document而准备。如果没有涉及到iframe，我们只传入一个参数就行了。最后一个参数永远是CSS字符串。
然后是动态生成styleSheet元素，把CSS字符串加入到此元素的问题。当然如果有现阶段的，当然就用现成的。DOM元素越多对游览器的负担就越大。我们想到document.styleSheets方法。它返回一个集合，包含style元素与link元素，还涉及一兼容问题，如：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN&
&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml& xml:lang=&en& lang=&en&&
&meta http-equiv=&content-type& content=&text/charset=UTF-8& /&
&%# 强制IE8像IE7一样呈现网页 -%&
&meta http-equiv=&X-UA-Compatible& content=&IE=EmulateIE7&P /&
&%#--默认所有的链接都在本窗口打开 -%&
&base target=&_self& /&
&title&&%= h(yield(:title)) || controller.action_name& %&&/title&
&%= stylesheet_link_tag &screen&,&button&,&style&& %&
&link rel=&stylesheet& href=&/stylesheets/print.css& type=&text/css& media=&print&&
&!--[if lt IE 8]&
&link rel=&stylesheet& href=&/stylesheets/ie.css& type=&text/css& media=&screen&&
&![endif]--&
&%= javascript_tag &window._token = '#{form_authenticity_token}'& if ActionController::Base.allow_forgery_protection %&
&%= javascript_include_tag :defaults& %&
&style type=&text/css& media=&print&&&/style&
上面用alert(document.styleSheets.length);测试一下，IE返回6，W3C游览器返回5。因此，否决了它。而且我们只用到style元素，不使用外联。第二部分的判定就针对head中的style元素而言，没有就创建一个。然后我们把CSS字符串加在第一个 style元素就行了。
接着我们要加把保险锁，因为当media=&print&时，只在页面打印时，定义的效果才有效。为了防止第一个style元素的media值不是screen，我们得改一改。
var& styleElement = styleElements[0];
var media = styleElement.getAttribute(&media&);
if(media != null && !/screen/.test(media.toLowerCase()) ){
styleElement.setAttribute(&media&, &screen&);
附上media的一些说明。
&&& * screen (缺省值)，提交到计算机屏幕；
&&& * print， 输出到打印机；
&&& * projection，提交到投影机；
&&& * aural，扬声器；
&&& * braille，提交到凸字触觉感知设备；
&&& * tty，电传打字机 (使用固定的字体)；
&&& * tv，电视机；
&&& * all，所有输出设备。
最后是如此添加的问题。分IE，火狐与其他游览器三种。判定游览器也用各自的私有属性或方法。如styleSheet是IE独用的，getBoxObjectFor是火狐独用的（当然你也可以使用(/firefox /.test(navigator.userAgent.toLowerCase())），通常DOM操作是最耗时的，能用私有就用私有！
使用方法。
addSheet(&\
&.RTE_iframe{width:600height:300}\
&.RTE_toolbar{width:600}\
& .color_result{width:216}\
&.color_view{width:110height:25}\
&.color_code{text-align:font-weight:700;color:font-size:16}\
& div.table{width:176position:padding:1}\
& div.table td{font-size:12color:text-align:}\
对比一下51js的客服果果脚本，更短小，但是它会可能会创建多个style元素，还有一些效率的问题&&毕竟我这个最初是为开发富文本编辑而开发的，功能不强大不行啊！
动态添加样式表的规则
iCSS={add:function(css){
var D=document,$=D.createElement('style');
$.setAttribute(&type&,&text/css&);
$.styleSheet&&($.styleSheet.cssText=css)||
$.appendChild(D.createTextNode(css));
D.getElementsByTagName('head')[0].appendChild($);
iCSS.add(&\
&.dhoooListBox,.dhoooListBox li{margin:0;padding:0;list-style-type:font-size:12cursor:default}\
&.dhoooListBox{border:1px solid #width:180background:#height:200overflow:float:left}\
&.dhoooListBox li{margin:5line-height:24background:url(images/smilies/time.gif) no-repeat 0 60%;padding-left:25color:#555;}\
&.dhoooListBox li.selected{background-color:#FFCC33}\
最后追加几个相关的方法:
var getClass = function(ele) {
return ele.className.replace(/\s+/,' ').split(' ');
var hasClass = function(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
var addClass = function(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += & &+
var removeClass = function(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
视频教程列表
文章教程搜索
输入您的搜索字词
提交搜索表单
Javascript推荐教程
tel:<font color="#FF30058