createElement动态创建HTML对象脚本代码

174 阅读 0 评论 115 点赞

我是靠谱客的博主朴实大象，最近开发中收集的这篇文章主要介绍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.uoften.com/","牛C网"); 
</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("牛C网：http://www.uoften.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>