1.创建链接

  1. <script language="javascript">
  2. var o = document.body;
  3. //创建链接
  4. function createA(url,text)
  5. {
  6. var a = document.createElement("a");
  7. a.href = url;
  8. a.innerHTML = text;
  9. a.style.color = "red";
  10. o.appendChild(a);
  11. }
  12. createA("http://www.ffasp.com/","网页教学网");
  13. </script>

2.创建DIV

  1. <script language="javascript">
  2. var o = document.body;
  3. //创建DIV
  4. function createDIV(text)
  5. {
  6. var div = document.createElement("div");
  7. div.innerHTML = text;
  8. o.appendChild(div);
  9. }
  10. createDIV("网页教学网:http://www.ffasp.com/");
  11. </script>

3.创建表单项

  1. <script language="javascript">
  2. var o = document.body;
  3. //创建表单项
  4. function createInput(sType,sValue)
  5. {
  6. var input = document.createElement("input");
  7. input.type = sType;
  8. input.value = sValue;
  9. o.appendChild(input);
  10. }
  11. createInput("button","ooo");
  12. </script>

4.创建表格

  1. <script language="javascript">
  2. var o = document.body;
  3. //创建表格
  4. function createTable(w,h,r,c)
  5. {
  6. var table = document.createElement("table");
  7. var tbody = document.createElement("tbody");
  8. table.width = w;
  9. table.height = h;
  10. table.border = ;
  11. for(var i=;i<=r;i++)
  12. {
  13. var tr = document.createElement("tr");
  14. for(var j=;j<=c;j++)
  15. {
  16. var td = document.createElement("td");
  17. td.innerHTML = i + "" + j;
  18. //td.appendChild(document.createTextNode(i + "" + j));
  19. td.style.color = "#FF0000";
  20. tr.appendChild(td);
  21. }
  22. tbody.appendChild(tr);
  23. }
  24. table.appendChild(tbody);
  25. o.appendChild(table);
  26. }
  27. createTable(,,,);
  28. </script>

转载自:http://wangyj0898.blog.51cto.com/1519857/343660/

在js中使用createElement创建HTML对象和元素的更多相关文章

  1. JS中如何判断对象是对象还是数组

    JS中如何判断对象是对象还是数组 一.总结 一句话总结:typeof Array.isArray === "function",Array.isArray(value)和Objec ...

  2. node.js中express模块创建服务器和http模块客户端发请求

    首先下载express模块,命令行输入 npm install express 1.node.js中express模块创建服务端 在js代码同文件位置新建一个文件夹(www_root),里面存放网页文 ...

  3. node.js中net模块创建服务器和客户端(TCP)

    node.js中net模块创建服务器和客户端 1.node.js中net模块创建服务器(net.createServer) // 将net模块 引入进来 var net = require(" ...

  4. node.js中ws模块创建服务端和客户端,网页WebSocket客户端

    首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...

  5. 细看JS中的BOM、DOM对象

                                        DOM对象模型  DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的 ...

  6. JS中document.createElement()用法及注意事项

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 ...

  7. js中的函数,Date对象,Math对象和数组对象

    函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...

  8. JS中的数组创建,初始化

    JS中没有专门的数组类型.但是可以在程序中利用预定义的Array对象及其方法来使用数组. 在JS中有三种创建数组的方法: var arr = new Array(1,2,3,4); var arr = ...

  9. 如何在Node.js中合并两个复杂对象

    通常情况下,在Node.js中我们可以通过underscore的extend或者lodash的merge来合并两个对象,但是对于像下面这种复杂的对象,要如何来应对呢? 例如我有以下两个object: ...

随机推荐

  1. win32 API 学习

    SendMessage 函数原型 LRESULT SendMessage(HWND hWnd,UINT Msg,WPARAM wParam,LPARAM IParam) 详情:百度百科     msd ...

  2. Eclipse实用快捷键

    经典常用快捷键1. [ALT+/]此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ALT+/]快捷键带来的好处吧. 2. ...

  3. 【转】Eclipse快捷键 10个最有用的快捷键----不错

    原文网址:http://www.open-open.com/bbs/view/1320934157953 1.选中你要加注释的区域,用ctrl+shift+C 会加上//注释2.先把你要注释的东西选中 ...

  4. 线程----BlockingQueue (转)

    t java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue; import java.ut ...

  5. mysql的password()函数和md5函数

    password用于修改mysql的用户密码,如果是应用与web程序建议使用md5()函数, password函数旧版16位,新版41位,可用select length(password('12345 ...

  6. centos ssh 乱码

    vim /etc/sysconfig/i18n 然后把里面的LANG="zh_CN.UTF-8"改成LANG="zh_CN.GB18030"

  7. XSS 前端防火墙(4):天衣无缝的防护

    例如,我们的属性钩子只考虑了 setAttribute,却忽视还有类似的 setAttributeNode.尽管从来不用这方法,但并不意味人家不能使用. 例如,创建元素通常都是 createEleme ...

  8. linux中ulimit作用

    一.作用 Linux对于每个用户,系统限制其最大进程数.为提高性能,可以根据设备资源情况,设置各linux 用户的最大进程数. ulimit主要是用来限制进程对资源的使用情况的,它支持各种类型的限制, ...

  9. Spring配置数据库固定代码

    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" > &l ...

  10. Windows下配置使用WinPcap

     0.前提 windows: win7 x64 WinPcap版本:4.1.3 WinPcap开发包:4.1.2 目标:在VS2010中配置使用winpcap 获取目标计算机中安装的网卡列表  1.下 ...