曼谷因美食网

全部频道

您的当前位置：首页动态生成HTML元素并为元素追加属性

动态生成HTML元素并为元素追加属性

来源：曼谷因美食网


<!DOCTYPE html> <html lang="en"> <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <script src="jquery-1.11.1.min.js"></script> 
 <script> 
 $(function(){ 
 var $link=$('<a href="#" id="link" style="color:pink">登录</a>'); 
 $('#main').append($link); 

 }) 
 </script> </head> <body> <p id="main"></p> </body> </html>

javascript动态追加html元素

主要有是两种方案：
1.使用DOM

 //使用createElement创建元素
 var dialog = document.createElement('p'); 
 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);

2.使用html template

var popContent =[ 
'<li class="monitory-point-li" indexcode="00000000001310013631">', 
'<span class="checkbox-unchecked"></span>', 
'<span class="monitory-text" title="'+name+'">'+formedName+'</span>', 
'</li>'
 ].join(' ');
$('.document').append(popContent);
<p class="se-preview-section-delimiter"></p>

或者使用这种写法

var popContent = '<li class="monitory-point-li" indexcode="00000000001310013631">'+ 
'<span class="checkbox-unchecked"></span>'+ 
'<span class="monitory-text" title="'+name+'">'+formedName+'</span>'+ 
'</li>';
$('.document').append(popContent);
显示全文