码迷,mamicode.com
首页 > Web开发 > 详细

在js中使用createElement创建HTML对象和元素

时间:2015-08-03 14:21:30      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:

1.创建链接

<script language="javascript"> 
var o = document.body; 
//创建链接 
function createA(url,text) 
{ 
var a = document.createElement("a"); 
a.href = url; 
a.innerHTML = text; 
a.style.color = "red"; 
o.appendChild(a); 
} 
createA("http://www.ffasp.com/","网页教学网"); 
</script> 

  

 

2.创建DIV

<script language="javascript"> 
var o = document.body; 
//创建DIV 
function createDIV(text) 
{ 
var div = document.createElement("div"); 
div.innerHTML = text; 
o.appendChild(div); 
} 
createDIV("网页教学网:http://www.ffasp.com/");    
</script> 

  

 
3.创建表单项
<script language="javascript"> 
var o = document.body; 
//创建表单项 
function createInput(sType,sValue) 
{ 
var input = document.createElement("input"); 
input.type = sType; 
input.value = sValue; 
o.appendChild(input); 
} 
createInput("button","ooo"); 
</script> 

  

 
4.创建表格
<script language="javascript"> 
var o = document.body; 
//创建表格 
function createTable(w,h,r,c) 
{ 
var table = document.createElement("table"); 
var tbody = document.createElement("tbody"); 
table.width = w; 
table.height = h; 
table.border = 1;    
for(var i=1;i<=r;i++) 
{ 
var tr = document.createElement("tr"); 
for(var j=1;j<=c;j++) 
{ 
var td = document.createElement("td"); 
td.innerHTML = i + "" + j; 
//td.appendChild(document.createTextNode(i + "" + j)); 
td.style.color = "#FF0000"; 
tr.appendChild(td); 
} 
tbody.appendChild(tr);    
} 
table.appendChild(tbody); 
o.appendChild(table); 
} 
createTable(270,270,9,9); 

  

5.创建select
jquery 的话这样
<select id="selectid">
</select>
 
$(function(){
   $("#selectid").click(function(){
        $("#selectid").append("<option value=‘"+entity+"‘>"+entity+"</option>");//entity 变量
}); 
  
});

js的话
function padd(){
 var objOption = document.createElement("OPTION");
 objOption.text= 2; 
 objOption.value=2; 
 document.getElementById("padd").options.add(objOption);
}

</script>

  

在js中使用createElement创建HTML对象和元素

标签:

原文地址:http://www.cnblogs.com/phpall/p/4699170.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!