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 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
angular简介和其特点介绍
Jan 29 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
完美的js图片轮换效果
Feb 05 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
javaScript Array api梳理
Mar 31 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面向对象法则
2012/02/23 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python实现的knn算法示例
2018/06/14 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python双向链表原理与实现方法详解
2019/12/03 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
python实现图片素描效果
2020/09/26 Python
美国创意之家:BulbHead
2017/07/12 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
航海技术专业毕业生求职信
2014/04/06 职场文书
受伤赔偿协议书
2014/09/24 职场文书
先进个人申报材料
2014/12/30 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
Python实现简单得递归下降Parser
2022/05/02 Python