JS操作DOM
【功能：点击按钮显示表单】
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
function displays()
{
//定义节点
var myRoot = document.getElementById("show");
var form = document.createElement("form");
var table = document.createElement("table");
var tr = new Array(3);
var td = new Array(6);
var input = new Array(6);
for(var i = 0; i < tr.length; i++)
{
tr[i] = document.createElement("tr");
}
for(var i = 0; i < td.length; i++)
{
td[i] = document.createElement("td");
}
for(var i = 0; i < input.length; i++)
{
input[i] = document.createElement("input");
}
//连接节点
myRoot.appendChild(form);
form.appendChild(table);
for(var i = 0; i < tr.length; i++)
{
table.appendChild(tr[i]);
}
for(var i = 0, j = -0.5; i < td.length; i++, j += 0.5)
{
tr[Math.round(j)].appendChild(td[i]);
td[i].appendChild(input[i]);
}
//设置属性
input[0].type="text";
input[0].value="用户名:";
input[0].style.border="none";
input[0].readOnly="true";
input[1].type="text";
input[2].type="text";
input[2].value="密码:";
input[2].style.border="none";
input[2].readOnly="true";
input[3].type="password";
input[4].type="reset";
input[5].type="submit";
}
</script>
</head> <body>
<input type="button" value="显示表单" onclick="displays();">
<br/><br/><br/><br/>
<div id="show">
</div>
</body>
</html>
JS操作DOM的更多相关文章
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）
[JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...
- JS操作DOM常用API总结
<JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的 ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- JS操作DOM对象——JS基础知识（四）
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...
- [总结]JS操作DOM常用API详解
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
随机推荐
- 【BZOJ-1588】营业额统计 Splay
1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 12485 Solved: 4508[Submit][Sta ...
- udp 内网穿透 互发消息
还差实现内网终端,向服务器发送请求,要对方的内网连接自己,实现打洞.在同一网段,或者公网运行,可以相互聊天. 没有实现检测客户端下线功能. 1,服务器代码 package router; import ...
- React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE
Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮 ...
- 解决IE apk变成zip：Android 手机应用程序文件下载服务器 配置解决方法
APK文件其实是zip格式,但后缀名被修改为apk,通过UnZip解压后,可以看到Dex文件,Dex是Dalvik VM executes的全称,即Android Dalvik执行程序,并非Java ...
- polling 和 long polling 工作原理
polling & long polling 参考:http://stackoverflow.com/questions/11077857/what-are-long-polling-webs ...
- 反射型xss绕过IE xss filter
反射xss利用方法,绕过IE XSS Filter 假设 1.php页面代码如下: echo $_GET['str']; 使用IE浏览器访问该页面 1.php?str=<xss code> ...
- 动态插入、添加删除表格行的JS代码
<html> <head> <title>Table对象的方法</title> <script language="JavaScript ...
- CSS 仿Excel表格功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 定义declare、%TYPE%、ROWTYPE、加循环
%TYPE:定义一个变量,其数据类型与已经定义的某个 数据变量的类型相同,或者与数据库表的某个列的数据类型相同,这时可以使用%TYPE. %ROWTYPE PL/SQL 提供%ROWTYPE 操作符, ...
- ios开发 <AppName>-Prefix.pch文件的用法详解
我们知道,每新建立一个工程,比如说HelloWord,在分类SupportingFiles里都会有一个以工程名开头-Prefix.pch结尾的文件,如HelloWord-Prefix.pch.对于这个 ...