<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>加法计算器</title>

    <script type="text/javascript">

        function Addvalue()

        {

            var txt1 = document.getElementById("text1").value;

            var txt2 = document.getElementById("text2").value;

            var txt3 = parseInt(txt2,10) + parseInt(txt1,10);

            var input = document.getElementById("result");

            input.value = txt3;

        }

        function AddNewButton()

        {

            var position = document.getElementById("divMain");

            var input = document.createElement("input");

            input.value = "动态增加的按钮";

            input.type = "button";

            input.onclick = AddNewButton;

            position.appendChild(input);

        }

        function AddNewLink()

        {

            var position = document.getElementById("divMain");

            position.innerHTML = "<a href='htmlpagedom.html'>htmlpagedom.html</a>";

        }

        function AddThreeLink()

        {

            var position = document.getElementById("divMain");

            var table = document.createElement("table");

            var data = {"百度":"http://baidu.com","新浪":"http://xinlang.cn","网易":"http://wangyi.com"};

            var tr = document.createElement("tr");

            for (var key in data)

            {

                var td = document.createElement("td");

                td.innerHTML = "<a href='" + data[key] + "'>" + key + "</a>";

                tr.appendChild(td);

            }

            table.appendChild(tr);

            position.appendChild(table);

        }

        function AddTable()

        {

            var position = document.getElementById("divMain");

            var table = document.createElement("table");

            var data = { "百度": "http://baidu.com", "新浪": "http://xinlang.cn", "网易": "http://wangyi.com" };

            for(var key in data)

            {

                var tr =table.insertRow(-1);

                var td1 = tr.insertCell(-1);

                var td2 = tr.insertCell(-1);

                td1.innerText = key;

                td2.innerText = data[key];

                //tr.appendChild(td1);

                //tr.appendChild(td2);

                //table.appendChild(tr);

            }

            position.appendChild(table);

        }

        var WriteComment=function()//将textarea里的内容传进来

        {

            var table = document.getElementById("comment");

            var input = document.getElementById("nickname").value;

            var text = document.getElementById("commentplace").value;

            var tr = document.createElement("tr");

            var td1 = tr.insertCell(-1);

            var td2 = tr.insertCell(-1);

            td1.innerText = input;

            td2.innerText = text;

            table.tBodies[0].appendChild(tr);

        }

    </script>

</head>

<body>

    <input type="text" id="text1" /><br/>

    <input type="text" id="text2" /><br/>

    <input type="button" value="相加" onclick="Addvalue()"/><br/>

    <input type="text" id="result" readonly="readonly"/>

    <div id="divMain"></div>

    <input type="button"onclick="AddNewButton()"value="添加新按钮"/><br/>

    <input type="button"onclick=" AddNewLink()"value="添加新链接"/><br/>

    <input type="button"onclick="AddThreeLink()"value="添加链接表" />

    <input type="button" onclick="AddTable()" value="添加新表" />

    <table id="comment">

        <thead>

            <td>猫猫：</td><td>这里有沙发快点抢啊！</td>

        </thead>

        <tbody>

        </tbody>

    </table>

    <font>昵称</font><input type="text" id="nickname"/>

    <font>评论</font><br/><textarea id="commentplace">

    </textarea>

    <input type="button"value="评论" onclick="WriteComment()"/>

    <hr/>

    <input type="button" onclick="alert(this.value)"value="click"/>

    <!--this 只能应用在本身函数内，不允许在外部函数使用-->

    <input type="button" onclick="alert(event.srcElement.value)" value="click" />

</body>

</html>

DOM动态增加控件的更多相关文章

  1. android动态增加控件时控制样式的方法

    在学习android的动画时,发现所谓的tween动画只是改变绘制效果并不改变原控件的位置时是颇为失望的,虽然3.0之后已经有了property animation,但是由于要兼容老版本的androi ...

  2. LayoutInflater的动态增加控件

    在实际开发中LayoutInflater这个类是非常有用的,它的作用类似于 findViewById(),不同点是LayoutInflater是用来找layout下xml布局文件. 而findView ...

  3. DOM动态操纵控件案例

    点击登陆显示登陆框 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head ...

  4. 在Extjs中动态增加控件

    Ext.onReady(function () { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var aut ...

  5. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  6. Jquery 动态追加控件并获取值

    先展示通过动态添加控件的结果: 实现步骤: 1.引用js文件 <script src="Script/jquery-1.5.1.min.js" type="text ...

  7. JQuery动态添加控件并取值

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. winform导入导出excel，后台动态添加控件

    思路: 导入: 1,初始化一个OpenFileDialog类 (OpenFileDialog fileDialog = new OpenFileDialog();) 2, 获取用户选择文件的后缀名(s ...

  9. Android 在布局容器中动态添加控件

    这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...

随机推荐

  1. 孤荷凌寒自学python第八十二天学习爬取图片2

    孤荷凌寒自学python第八十二天学习爬取图片2 (完整学习过程屏幕记录视频地址在文末) 今天在昨天基本尝试成功的基础上,继续完善了文字和图片的同时爬取并存放在word文档中. 一.我准备爬取一个有文 ...

  2. Windows10系统tensorflow-gpu安装

    准备工作 安装前请确保自己的显卡支持gpu加速,支持加速的gpu型号可在下面的链接中查询. https://www.geforce.com/hardware/technology/cuda/suppo ...

  3. Python3实现机器学习经典算法（四）C4.5决策树

    一.C4.5决策树概述 C4.5决策树是ID3决策树的改进算法,它解决了ID3决策树无法处理连续型数据的问题以及ID3决策树在使用信息增益划分数据集的时候倾向于选择属性分支更多的属性的问题.它的大部分 ...

  4. Docker学习记录3: 搭建 Private Registry

    恩, Private Registry 特别好搭建, 只要依照官方文档, 很容易安装... https://docs.docker.com/registry/deploying/ 5000是个常用的端 ...

  5. 【树莓派 Raspberry-Pi 】系统安装及一些必要的配置

    上周六刚收到我的小电脑,被无线设置卡住了,文章并非原创,参考了几个朋友的折腾经历,自己整理下备忘,也希望能帮到和我一样在树莓派方面小白的人,也希望可以和更多有这方面兴趣的朋友共同交流 0. 操作系统下 ...

  6. 2017秋-软件工程第四次作业（2）-结对使用TDD框架完成单元测试

    第一次接触“单元测试”这个要求,我和队友学习了一些示例后开始操作.如下展示一些建立单元测试的过程.Step1:右键单击[解决方案]->左键单击[添加(D)]->[新建项目(N)]. Ste ...

  7. Java 动态绑定和多态

    动态绑定和多态 动态绑定是指:"在执行程序期间(而非编译期间),判断引用所指对象的实际类型,调用其相应的方法." 动态绑定(多态)存在的条件 要有继承. 要有重写. 父类引用指向子 ...

  8. Response.End方法

    文章:在try...catch语句中执行Response.End()后如何停止执行catch语句中的内容 调用Response.End()方法能保证,只输出End方法之前的内容. 调用Context. ...

  9. lintcode-13-字符串查找

    字符串查找 对于一个给定的 source 字符串和一个 target 字符串,你应该在 source 字符串中找出 target 字符串出现的第一个位置(从0开始).如果不存在,则返回 -1. 说明 ...

  10. 选择正确的C/C++ runtime library

    本文是对http://www.davidlenihan.com/2008/01/choosing_the_correct_cc_runtim.html的翻译,如有错误,还请指正 c/c++运行库(ru ...