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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
js函数调用的方式
May 06 Javascript
js中跨域方法原理详解
Jul 19 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
vue数据字典取键值项目的字典问题
Apr 12 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
php中取得URL的根域名的代码
2011/03/23 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
JS Array对象入门分析
2008/10/30 Javascript
页面中js执行顺序
2009/11/09 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
JS中表单的使用小结
2014/01/11 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
Python中装饰器学习总结
2018/02/10 Python
python自动发送邮件脚本
2018/06/20 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python 实现兔子生兔子示例
2019/11/21 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
简述数据库的设计过程
2015/06/22 面试题
餐饮营销方案
2014/02/23 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
绩效考核实施方案
2014/03/18 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python