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 相关文章推荐
js Date概念详细介绍
Nov 22 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
PassWord输入框代码分享
Jun 07 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 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
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
javascript实现时钟动画
2020/12/03 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python模块搜索路径代码详解
2018/01/29 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python之array赋值技巧分享
2019/11/28 Python
python中数据库like模糊查询方式
2020/03/02 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
五一劳动节活动记录
2014/03/23 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
初中优秀学生评语
2014/12/29 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
纪录片信仰观后感
2015/06/08 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
SQL SERVER触发器详解
2022/02/24 SQL Server