<!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. 二：新浪微博：第三方框架管理工具CocoaPods的安装和使用

    一:CocoaPods的安装 我们可以用淘宝的Ruby镜像来访问cocoapods.按照下面的顺序在终端中敲入依次敲入 $ gem sources --remove https://rubygems. ...

  2. C++中回调(CallBack)的使用方法（其实就是类方法指针，我觉得你的方法易用性不好，虽然原理正确）

    回调函数是一个很有用,也很重要的概念.当发生某种事件时,系统或其他函数将会自动调用你定义的一段函数.回调函数在windows编程使用的场合很多,比如Hook回调函数:MouseProc,GetMsgP ...

  3. 【机器学习实战】第3章 决策树（Decision Tree）

    第3章 决策树 <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/ ...

  4. MVC4中AJAX Html页面打开调用后台方法实现动态载入数据库中的数据

    之前一直用window.onload方法来调用js方法来实现,今天纠结能不能换个方法实现. 非常明显是能够的. 在html前台页面引用js代码例如以下 @Scripts.Render("~/ ...

  5. Android有用的任务管理器—tractor

    在平时的android开发工作中,我们常常须要运行耗时操作,有时为了用户体验还须要显示个等待框,我之前的做法都是开一个线程,然后用handler发消息进行显示和关闭等待框以及相关的ui操作.假设任务比 ...

  6. UVA 10561 - Treblecross（博弈SG函数)

    UVA 10561 - Treblecross 题目链接 题意:给定一个串,上面有'X'和'.',能够在'.'的位置放X.谁先放出3个'X'就赢了,求先手必胜的策略 思路:SG函数,每一个串要是上面有 ...

  7. 利用for循环的嵌套输出图形--课后作业

    for (int i = 1; i <= 8; i++) { int a, b; for (a = 1; a < i; a++) Console.Write(" "); ...

  8. 从研究try catch 捕获不到异步错误谈谈学习方法的问题

    先看下面的代码,思考一下输出 try { throw new Error(3) } catch (e) { console.log(e) } try { setTimeout(function () ...

  9. vuex与vue-router学习方案

    1.vuex,官方vuex2.0的文档写得太简略了,先1.0的文档,研究1.0分支的counter例子.1.0文档只需看核心概念和API参考文档.2.0的用法先不管,需要的时候再说,先把1.0高熟练. ...

  10. Qtcreator中常用快捷键总结（有必要牢记，提高编程效率）

    F1        查看帮助F2        跳转到函数定义(和Ctrl+鼠标左键一样的效果)Shift+F2    声明和定义之间切换F4        头文件和源文件之间切换Ctrl+1     ...