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 笔记二 Array和Date对象方法
May 22 Javascript
JavaScript小技巧 2.5 则
Sep 12 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
浅析java线程中断的办法
Jul 29 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 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
DIY实用性框形天线
2021/03/02 无线电
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Python入门篇之字典
2014/10/17 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python中几种自动微分库解析
2019/08/29 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
python如何写个俄罗斯方块
2020/11/06 Python
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
医学求职自荐信
2014/06/21 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏