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自定义事件代码说明
Jan 31 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
微信小程序反编译的实现
Dec 10 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可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
python实现大学人员管理系统
2019/10/25 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python实现自动装机功能案例分析
2020/10/22 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
如何提高MySql的安全性
2014/06/19 面试题
新浪微博实习心得体会
2014/01/27 职场文书
廉洁自律承诺书
2014/03/27 职场文书
就业协议书范本
2014/04/11 职场文书
毕业设计论文评语
2014/12/31 职场文书
车间统计员岗位职责
2015/04/14 职场文书
人生感悟经典句子
2019/08/20 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers