<!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. 【37.21%】【codeforces 721B】Passwords

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  2. 结构体（struct）与类（class）

    在 C++ 的范畴里,除了 struct 结构体不支持访问权限修饰符(private.protected.public)外,已不再区分二者的其他方面语法上的差异. 因此,在 C++ 编程中,如果一个类 ...

  3. 忙里偷闲( ˇˍˇ )闲里偷学【C语言篇】——（9）链表

    我们至少可以通过两种结构来存储数据 数组 1.需要一整块连续的存储空间,内存中可能没有 2.插入元素,删除元素效率极低. 3.查找数据快 链表 1.查找效率低 2.不需要一块连续的内存空间 3.插入删 ...

  4. nodejs版本号更新问题：express不是内部或外部命令

    版本号更新后,我们使用熟悉的npm install -g express命令安装,可是,成功安装之后竟然提示express不是内部或外部命令. nodejs小问题:[1]express不是内部或外部命 ...

  5. PHP移动互联网开发笔记（4）——自定义函数及数组

    一.自定义函数 自定义函数就是我们自己定义的函数,在PHP中自定义函数格式如下: function funname(arg1, arg2, arg3......){ //TODO return val ...

  6. IT增值服务客户案例(二)：河南郑州大四实习生，职业规划和项目开发指导

    客户整体情况,河南郑州大四在校学生,目前在企业实习,从事Java开发工作.有一定的项目开发经验,对Java周边技术有基本的理解. 客户购买的是"拜师学艺"服务,按月付款. 经过多次 ...

  7. 【hdu5692】Snacks

    Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submissio ...

  8. NET C#转Java

    NET C#转Java .NET C#转Java没那么难,都是面向对象的语言,而且语法还是相似的,先对比一下开发环境,再到Servlet,再到MVC,都是一样一样的,只是JAVA的配制项比较多而已,只 ...

  9. 控制器管理UINavigationController、UINavigationBar

    控制器管理 掌握 控制器以及view的多种创建方式 UINavigationController的简单使用:添加\移除子控制器 UINavigationBar内容的设置 控制器的生命周期方法 Segu ...

  10. 选iphone5可以正常编译运行 , 但是5s和6和6s都会编译报错

    选iphone5可以正常编译运行   但是5s和6和6s都会编译报错 iphone6编译报错iphone5s编译报错 解决办法是,Build settings里面把Architectures里面的$( ...