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

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); 

</script>

 

转载自：http://wangyj0898.blog.51cto.com/1519857/343660/