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 DOM 元素ID就是全局变量
Sep 20 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
video.js添加自定义组件的方法
Dec 09 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
咖啡的化学
2021/03/03 咖啡文化
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php中in_array函数用法探究
2014/11/25 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
React快速入门教程
2017/01/17 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
详解python之简单主机批量管理工具
2017/01/27 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
阿里旅行:飞猪
2017/01/05 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
教育学专业毕业生的自我评价
2013/11/21 职场文书
运动会广播稿20字
2014/02/18 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
新年晚会开场白
2015/05/29 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL