<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        onload = function () {
            document.getElementById('btnImage').onclick = function () {
                var img = document.createElement('img');
                img.src = "bird1.png";
                document.getElementById('dv').appendChild(img);
            };
            document.getElementById('btnText').onclick = function () {
                var input = document.createElement('input');
                input.type = 'text';
                document.getElementById('dv').appendChild(input);
            };
            document.getElementById('btnLink').onclick = function () {
                var a = document.createElement('a');
                a.innerText = '163';
                a.href = 'http://www.163.com';
                document.getElementById('dv').appendChild(a);
            };
            document.getElementById('btnDel').onclick = function () {
                var nodes = document.getElementById('dv').childNodes;
                while (nodes.length>0) {
                    document.getElementById('dv').removeChild(nodes[0]);
                    nodes = document.getElementById('dv').childNodes;
                }

            }
        }
    </script>
</head>
<body>
    <input type="button" name="name" value="图片" id="btnImage" />
    <input type="button" name="name" value="文本框" id="btnText" />
    <input type="button" name="name" value="超链接" id="btnLink" />
    <input type="button" name="name" value="删除" id="btnDel" />
    <div id="dv">

    </div>
</body>
</html>

js 动态操作元素的更多相关文章

  1. 无阻塞加载外部js(动态脚本元素，XMLHttpRequest注入，LazyLoad)

    动态脚本元素即在js中去创建<script>标签加载外部js并执行,这样加载的好处是文件的下载和执行过程不会阻塞页面的其他进程.通过下面两个例子对比出效果 <!DOCTYPE htm ...

  2. JS动态创建元素（两种方法）

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

  3. 使用JS动态操作css的集中方法

    内联样式 在咱们深入一些复杂的知识之前,先回来顾一下一些基础知识.例如,咱们可以通过修改它的.style属性来编辑给定的HTMLElement的内联样式. const el = document.cr ...

  4. Js动态操作表格

    HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  5. JS动态创建元素

    动态添加标签,可从服务器获取标签文本,然后加载到指定div中,可用于权限控制. 1.添加标签字符串方式 var str='<div>5555555555555555555555555555 ...

  6. js动态操作DOM

    创建一个元素 createElement() 向元素末尾添加一个子节点 appendChild() 将新的元素插入到指定元素的前面 insertBefore(new,old); 删除一个子节点 rem ...

  7. js动态操作订单表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery动态操作元素

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

随机推荐

  1. adobe Changing PDF Link Color for Regulatory Submissions

    Changing PDF Link Color for Regulatory Submissions http://blogs.adobe.com/acrobatforlifesciences/200 ...

  2. Kinect舒适区范围--UE4 的Blueprint测试范例

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接: http://blog.csdn.net/cartzhang/article/details/44748475 作者:ca ...

  3. Android NDK对象的引用-全局引用，局部引用，弱引用

    百度了一下,google了一下,关于NDK引用的介绍无10篇中就有9.9篇是相同的,对于这种问题,我只能呜呼哀哉了!! 局部引用(函数内部对象类型变量):在C或C++中,局部变量表示只运行范围局限在该 ...

  4. Local database deployment problems and fixtures

    /*By Jiangong SUN*/ After encountering some problems in deploying databases to local server, here ar ...

  5. HDU 5044 Tree（树链剖分）

    HDU 5044 Tree field=problem&key=2014+ACM%2FICPC+Asia+Regional+Shanghai+Online&source=1&s ...

  6. 通过rinetd实现port转发来訪问内网的服务

    一.   问题描写叙述 通过外网来訪问内网的服务 二.   环境要求 须要有一台能够外网訪问的机器做port映射.通过数据包转发来实现外部訪问阿里云的内网服务 三.   操作方法 做port映射的方案 ...

  7. SQL中where语句不能使用直接跟在select后列的别名

    由于select语句的执行顺序为: 1. from语句 2. where语句(结合条件) 3. start with语句 4. connect by语句 5. where语句 6. group by语 ...

  8. 再续FPGA初心，京微齐力脱胎京微雅格重新起航（700万元天使轮，泰有基金领投，水木基金、臻云创投、泰科源跟投。数千万元Pre-A轮融资，领投方为海康基金）

    集微网消息,新的一年开启新的希望,新的空白承载新的梦想.这是年初一集微网给读者们拜年时写的寄语.在中国农历新年开年之际,半导体产业里也迎来了许多新的起点.例如长江存储在与苹果就采购前者的Nand闪存芯 ...

  9. C#编写TensorFlow人工智能应用

    C#编写TensorFlow人工智能应用 TensorFlowSharp入门使用C#编写TensorFlow人工智能应用学习. TensorFlow简单介绍 TensorFlow 是谷歌的第二代机器学 ...

  10. 【38.46%】【codeforces 615E】Hexagons

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...