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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
jquery indexOf使用方法
Aug 19 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
Vue实现简单计算器
Jan 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
使用Python的PIL模块来进行图片对比
2016/02/18 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Tornado 多进程实现分析详解
2018/01/12 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python调用java的jar包方法
2018/12/15 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
高级方案规划工程师岗位职责
2013/11/29 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
股指期货心得体会
2014/09/10 职场文书
小学教育见习报告
2014/10/31 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
vue实现同时设置多个倒计时
2021/05/20 Vue.js