<!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. Java获取文件路径的几种方法

    第一种: File f = new File(this.getClass().getResource("/").getPath()); System.out.println(f); ...

  2. Android 报错 Error:(303, 27) 错误: 找不到符号 符号: 方法 sin(float) 位置: 类 FloatMath

    今天更新了sdk,升级到Android SDK 23.发现Android studio用23编译 SlidingMenu时出错,错误如下: 报错的地方这这里: float distanceInflue ...

  3. php Apache配置伪静态的介绍

    以下是摘抄http://jingyan.baidu.com/article/86112f132aa7462737978718.html的,作为记录,方便以后参考 现有的在线网上视频教程对伪静态的讲解比 ...

  4. [Angular] ChangeDetection -- onPush

    To understand how change detection can help us improve the proference, we need to understand when it ...

  5. 贝勒爷教你怎样在Mac上安装Microsoft Office

    1.亲,鼠标双击该安装文件: 2.非常好,你将会看到这样一个东东(假设没有看到那就不要来见我了): 3.不错,再次双击红色区域,假设出现下面提示,别怕哈: 4.点击"好"butto ...

  6. PatentTips - OpenCL compilation

    BACKGROUND The present disclosure relates generally to integrated circuits, such as field programmab ...

  7. 最好用的中文速查表（Bash，Gdb，VIM，Nano）

    最好用的中文速查表(Cheatsheet) 当年学习 Linux 时就是靠着一张常用命令小卡片,敲啥命令忘记了,经常拿起来看看,后来知道这玩意儿叫做速查表(Cheatsheet),于是开始有意识收集和 ...

  8. 怎样在log4j.xml配置文件中引入变量：小公司经验较多的我和阿里UC等大公司经验较多的Boss，一些技术交流和探讨

    从最初学习使用log4j的时候,网上和书本上主要都是使用"log4j.properties"这种属性格式,配置日志.多年以来,一直使用这种格式,总的来说,简单.够用.    而有十 ...

  9. 【b504】等价表达式(NOIP2005第4题)

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数 ...

  10. [GeekBand ] 利用 pass by reference -to -const 编写高效规范的 c++代码

    本文参考资料 :  GeekBand 侯捷老师,学习笔记 Effective C ++ 侯捷译 条款20 开发环境采用:VS2013版本 首先:分析值传递的缺点 (一) class Person{ p ...