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 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
安装vue-cli的简易过程
May 22 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
原生js实现贪吃蛇游戏
Oct 26 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(一)
2012/03/21 PHP
提高网站信任度的技巧
2008/10/17 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python3字符串操作总结
2019/07/24 Python
Python实现某论坛自动签到功能
2019/08/20 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
大学生就业自荐信
2013/10/26 职场文书
交通安全寄语大全
2014/04/08 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
python+opencv实现目标跟踪过程
2022/06/21 Python