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中最常用的55个经典小技巧
Nov 29 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
微信小程序使用npm包的方法步骤
Aug 13 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python3.6正式版新特性预览
2016/12/15 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Python函数参数操作详解
2018/08/03 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
详解Python 函数参数的拆解
2020/09/02 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
保安的辞职报告怎么写
2014/01/20 职场文书
求职信名称怎么写
2014/05/26 职场文书
认错检讨书
2014/10/02 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2014年大学生工作总结
2014/11/20 职场文书
小学运动会报道稿
2015/07/22 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
React如何创建组件
2021/06/27 Javascript