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


Posted in Javascript onNovember 24, 2008

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("https://3water.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网:https://3water.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>
Javascript 相关文章推荐
简单实用的js调试logger组件实现代码
Nov 20 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
javascript每日必学之多态
Feb 23 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
探索Vue高阶组件的使用
Jan 08 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 #Javascript
javascript call和apply方法
Nov 24 #Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 #Javascript
javascript 贪吃蛇实现代码
Nov 22 #Javascript
js利用div背景,做一个竖线的效果。
Nov 22 #Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 #Javascript
FireFox与IE 下js兼容触发click事件的代码
Nov 20 #Javascript
You might like
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
JS 常用校验函数
2009/03/26 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
pandas数值计算与排序方法
2018/04/12 Python
python 多线程重启方法
2019/02/18 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
python 命名规范知识点汇总
2020/02/14 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
大学自我鉴定范文
2013/12/26 职场文书
工作中个人的自我评价
2013/12/31 职场文书
表彰先进集体通报
2014/01/12 职场文书
道德模范先进事迹
2014/02/14 职场文书
土地转让协议书
2014/04/15 职场文书
党代会心得体会
2014/09/04 职场文书
实习工作表现评语
2014/12/31 职场文书
学校重阳节活动总结
2015/03/24 职场文书
夫妻吵架保证书
2015/05/08 职场文书
求职意向书范本
2015/05/11 职场文书
幼师辞职信范文大全
2015/05/12 职场文书