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取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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 DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
求得div 下 img的src地址的js代码
2007/02/28 Javascript
javascript cookies操作集合
2010/04/12 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python socket模块方法实现详解
2019/11/05 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
学前教育毕业生自荐信
2013/10/29 职场文书
经管应届生求职信
2013/11/17 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers