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 触发HTML元素绑定的函数
Sep 11 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
详解Layer弹出层样式
Aug 21 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
vue切换菜单取消未完成接口请求的案例
Nov 13 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
详解python中__name__的意义以及作用
2019/08/07 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
python实现图片素描效果
2020/09/26 Python
彻底解决Python包下载慢问题
2020/11/15 Python
李宁官方网店:中国运动品牌
2017/11/02 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
什么是属性访问器
2015/10/26 面试题
护士自我鉴定怎么写
2014/02/07 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
诉讼授权委托书
2014/10/15 职场文书
财务审计整改报告
2014/11/06 职场文书
创业计划书之服装
2019/10/07 职场文书
python关于集合的知识案例详解
2021/05/30 Python
SQL Server中的游标介绍
2022/05/20 SQL Server
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技