<script>window.onload = function(){document.title = '表单示例';var body = document.body;// body append child beginvar center = document.createElement('center'); body.appendChild(center);var h1 = document.createElement('h1');h1.innerHTML = '增加用户';center.appendChild(h1);var hr = document.createElement('hr');center.appendChild(hr);var form = document.createElement('form');form.action = 'test.jsp';form.method = 'post';center.appendChild(form);// body append child end//form append child    beginvar input1 = document.createElement('input');input1.type = 'hidden';input1.name = 'id';input1.id = '1';form.appendChild(input1);var table = document.createElement('table');table.width = '300';form.appendChild(table);//form append child end//table append child begin// tr1 beginvar tr = document.createElement('tr');table.appendChild(tr);var td = document.createElement('td');td.innerHTML = '账号:';tr.appendChild(td);var td = document.createElement('td');var input = document.createElement('input');input.type = 'text';input.name = 'uname';td.appendChild(input);tr.appendChild(td);//tr1 end//tr2 beginvar tr = document.createElement('tr');table.appendChild(tr);var td = document.createElement('td');td.innerHTML = '密码:';tr.appendChild(td);var td = document.createElement('td');var input = document.createElement('input');input.type = 'password';input.name = 'passwd';td.appendChild(input);tr.appendChild(td);//tr2 end//tr3 beginvar tr = document.createElement('tr');table.appendChild(tr);var td = document.createElement('td');td.innerHTML = '性别:';tr.appendChild(td);var td = document.createElement('td');//radio 男 beginvar input = document.createElement('input');input.type = 'radio';input.name = 'sex';input.value = '1';input.id = 'r1';td.appendChild(input);var label = document.createElement('label');label.setAttribute('for','1');label.innerHTML = '男';td.appendChild(label);//radio 男 end//radio 女 beginvar input = document.createElement('input');input.type = 'radio';input.name = 'sex';input.value = '2';input.id = 'r2';input.checked = 'check';td.appendChild(input);var label = document.createElement('label');label.setAttribute('for','2');label.innerHTML = '女';td.appendChild(label);//radio 女 end
    tr.appendChild(td);//tr3 end//tr4 beginvar tr = document.createElement('tr');table.appendChild(tr);var td = document.createElement('td');td.innerHTML = '爱好:';tr.appendChild(td);var td = document.createElement('td');//checkbox 游戏 beginvar input = document.createElement('input');input.type = 'checkbox';input.name = 'hobby';input.value = '1';td.appendChild(input);var text = document.createTextNode('游戏');td.appendChild(text);//checkbox 游戏 end//checkbox 电影 beginvar input = document.createElement('input');input.type = 'checkbox';input.name = 'hobby';input.value = '2';input.checked = 'check';td.appendChild(input);var text = document.createTextNode('电影');td.appendChild(text);//checkbox 电影 end//checkbox 音乐 beignvar input = document.createElement('input');input.type = 'checkbox';input.name = 'hobby';input.value = '3';input.checked = 'check';td.appendChild(input);var text = document.createTextNode('音乐');td.appendChild(text);//checkbox 音乐 end//checkbox 运动 beginvar input = document.createElement('input');input.type = 'checkbox';input.name = 'hobby';input.value = '4';td.appendChild(input);var text = document.createTextNode('运动');td.appendChild(text);//checkbox 电影 end
    tr.appendChild(td);//tr4 end//tr5 beginvar tr = document.createElement('tr');table.appendChild(tr);var td = document.createElement('td');td.innerHTML = '年级:';tr.appendChild(td);var td = document.createElement('td');var sel = document.createElement('select');sel.name = 'grade';td.appendChild(sel);var opt1 = new Option('一年级',1);var opt2 = new Option('二年级',2);var opt3 = new Option('三年级',3);opt3.setAttribute('selected',true);var opt4 = new Option('四年级',4);sel.appendChild(opt1);sel.appendChild(opt2);sel.appendChild(opt3);sel.appendChild(opt4);tr.appendChild(td);//tr5 end//tr6 beginvar tr = document.createElement('tr');table.appendChild(tr);var td = document.createElement('td');td.innerHTML = '相片:';tr.appendChild(td);var td = document.createElement('td');var input = document.createElement('input');input.type = 'file';input.name = 'picture';td.appendChild(input);tr.appendChild(td);//tr6 end//tr7 beginvar tr = document.createElement('tr');table.appendChild(tr);var td = document.createElement('td');td.innerHTML = '备注:';tr.appendChild(td);var td = document.createElement('td');var textarea = document.createElement('textarea');textarea.name = 'note';textarea.cols = 30;textarea.rows = 5;textarea.innerHTML = '中国';td.appendChild(textarea);tr.appendChild(td);//tr7 end//tr8 beginvar tr = document.createElement('tr');tr.align = 'center';table.appendChild(tr);var td = document.createElement('td');td.setAttribute('colspan','2');var input = document.createElement('input');input.type = 'submit';input.value = '提交';td.appendChild(input);var input = document.createElement('input');input.type = 'reset';input.value = '重置';td.appendChild(input);var input = document.createElement('input');input.type = 'button';input.value = '按钮';input.onclick = 'alert(1)';td.appendChild(input);var button = document.createElement('button');button.innerHTML = '增加';var img = document.createElement('img');img.src = 'open.png';button.appendChild(img);td.appendChild(button);tr.appendChild(td);//tr8 end//table append child end
}
</script>

转载于:https://www.cnblogs.com/maheng/p/4883561.html

用JS来create结点,纯JS代码生成html页面(作业练习)相关推荐

  1. html js 循环提示框,纯js超酷消息提示框插件notice.js

    notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...

  2. js ajax局部替换,纯JS实现AJAX局部刷新功能

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 J ...

  3. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器(八)

         Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员还 ...

  4. 纯JS脚本1k大小的3D玫瑰

    摘要:前年圣诞节上,西班牙程序员Roman Cortes带来了用纯js脚本编写的神奇3D圣诞树,令人印象深刻.2月14日情人节就要来临了,还是Roman Cortes,这次他又带来了用js脚本编写的红 ...

  5. 纯js封装一个无缝轮播

    下面的代码用纯js封装一个轮播组件.功能如下: 可上滑.下滑.左滑.右滑.无缝轮播. 移动端支持手势滑动. 可指定第一个显示的轮播图. 支持放置文字.图片和视频.带导航器. 导航器可自定义样式.若不想 ...

  6. html5网页怎么实现内容追加,纯js实现网页内容复制后自动追加自定义内容

    网页操作内容复制内容后纯js实现监听自动追加自定义内容 不少网站技术或者博客上有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢? 其实实现的方式很简单,可以在我 ...

  7. 动态增删表格行(纯JS写法)

    动态增删表格行(纯JS写法) 归档 进行表格下行的动态增加与删除 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...

  8. php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能,1.实现原理直接见代码,需要一 - phpStudy...

    纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果 复制代码 代码 ...

  9. 纯js制作的弹球游戏

    纯js的弹球游戏,撞壁自动返回,按钮放置暂停移动,移开开始移动 1 <!-- 2 author:zhangjie 3 date :2016-7-23 4 --> 5 <!DOCTYP ...

最新文章

  1. SAP Spartacus 从 Ngrx 里获取 navigation 的实时状态
  2. LeetCode 678. 有效的括号字符串(栈)
  3. android json传输数据到服务器,Android中post请求传递json数据给服务端的实例
  4. Python面向对象编程三大特性之继承
  5. 利用oc门或od门实现线与_福师《数字逻辑》在线作业二答案
  6. 2021年中国氮化镓适配器市场趋势报告、技术动态创新及2027年市场预测
  7. python异常捕获_Python 异常的捕获、异常的传递与主动抛出异常操作示例
  8. 公布中秋福利中奖名单
  9. java飞机大战强化版_java飞机大战升级版源码(全彩,背景音乐,各种音效,不同僚机,子弹特效以及技能系统)...
  10. windows配置路由表办公网和外网自动切换
  11. 什么是 Docker ?
  12. 利用FME进行火星、百度坐标反算及误差分析
  13. HDU 5855 Less Time, More profit 最大权闭合子图
  14. c++ 消息分发 消息管理
  15. 关于运算放大器电流流向的问题
  16. 通过路由器连接JetsonNano与地面站
  17. 计算机修改人类记忆曲线,遗忘曲线
  18. 企业网络营销制胜点:人才+策略
  19. 联想K3-Note固件编译,牛扎糖或更进一步?
  20. 关于用迅雷会下载到比较旧的资源版本?

热门文章

  1. 用JAVA打开指定应用程序(软件),比如qq,浏览器
  2. Java Word转Html
  3. 解说redis中如何实现高可用
  4. 浅谈mpvue项目目录和文件结构
  5. 跳出IT运维怪圈 看南方报业如何主动出击
  6. Tomcat自定义部署
  7. TextField对象相关的属性和方法总结
  8. 积累的VC编程小技巧之文件操作
  9. ehcache memcache redis 三大缓存男高音
  10. 关于软件版本命名的方法