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 相关文章推荐
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
webpack打包js的方法
Mar 12 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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 版本]
2007/03/20 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
Python set集合类型操作总结
2014/11/07 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
python实现教务管理系统
2018/03/12 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
十佳班主任事迹材料
2014/01/18 职场文书
行政人事岗位职责
2014/03/17 职场文书
自我鉴定标准格式
2014/03/19 职场文书
大三学习计划书范文
2014/05/02 职场文书
家长给学校的建议书
2014/05/15 职场文书
企业宣传口号
2014/06/12 职场文书
单身证明格式样本
2015/06/15 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书