【功能：点击按钮显示表单】

<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的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  3. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  4. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  5. 【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）

    [JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...

  6. JS操作DOM常用API总结

    <JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的 ...

  7. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  8. JS操作DOM对象——JS基础知识（四）

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

  9. [总结]JS操作DOM常用API详解

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  10. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

随机推荐

  1. 【poj1182】 食物链

    http://poj.org/problem?id=1182 (题目链接) 题意 中文题 Solution 带权并查集. 神犇博客,秒懂 fa记录父亲,r记录与父亲的关系.%3运用的很巧妙. 代码 / ...

  2. return view详解

    1.return View(); 返回值 类型:System.Web.Mvc.ViewResult将视图呈现给响应的 View() 结果. 注释 View() 类的此方法重载将返回一个具有空 View ...

  3. 洛谷P1736 创意吃鱼法

    题目描述 回到家中的猫猫把三桶鱼全部转移到了她那长方形大池子中,然后开始思考:到底要以何种方法吃鱼呢(猫猫就是这么可爱,吃鱼也要想好吃法 ^_*).她发现,把大池子视为01矩阵(0表示对应位置无鱼,1 ...

  4. POJ1088滑雪（dp+记忆化搜索）

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 86411   Accepted: 32318 Description ...

  5. Android模拟器端口被占用问题的解决办法

    一.问题描述 今天在Eclipse中运行Android项目时遇到"The connection to adb is down, and a severe error has occured& ...

  6. web后门排查与高效分析web日志技巧

    今年一直大大小小的事情忙,很少有时间能静下心写个文章,所以最近博客更新也越来越少了,公司现在安全团队在我这边,一直在玩命的招人.下个月8号有一个互联网金融的会,4月在qcon北京站,都以嘉宾的身份去分 ...

  7. C#中跨线程访问控件问题解决方案

    net 原则上禁止跨线程访问控件,因为这样可能造成错误的发生,推荐的解决方法是采用代理,用代理方法来间接操作不是同一线程创建的控件. 第二种方法是禁止编译器对跨线程访问作检查,可以实现访问,但是出不出 ...

  8. 字符串模拟赛T1

    // source code from laekov for c0x17 #define PRID "bxjl" #include <cstdio> #include ...

  9. TopCoder SRM 590

     第一次做TC,不太习惯,各种调试,只做了一题...... Problem Statement     Fox Ciel is going to play Gomoku with her friend ...

  10. cocos基础教程(2)Window环境下搭建（补充）

    一.环境搭建 1.JDK.Eclipse与SDK 我用的JDK是1.7 Eclipse用的是Luna版的 这些之前都已经设好了,相关下载自己网上找吧 2. 下载最新的Cocos2d-x,我下的是3.5 ...