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面象对象设计
Apr 28 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
php实现文章评论系统
2019/02/18 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
JS编程小常识很有用
2012/11/26 Javascript
js获取class的所有元素
2013/03/28 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
python 制作磁力搜索工具
2021/03/04 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
物业门卫岗位职责
2013/12/28 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
商业融资计划书
2014/04/29 职场文书
文员求职信
2014/07/15 职场文书
单位委托书格式范本
2014/09/29 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL