1. 追加子元素

my$("dv").appendChild(obj);
2. 把新的子元素插入到第一个子元素的前面
my$("dv").insertBefore(obj, my$("dv").firstElementChild);
3. 移除父级元素中第一个子级元素
    my$("btn2").onclick = function () {

      //移除父级元素中第一个子级元素

      my$("dv").removeChild(my$("dv").firstElementChild);

    };

4. 点击按钮删除div中所有的子级元素，先判断父级元素中有没有第一个子元素

    my$("btn3").onclick = function () {

      //点击按钮删除div中所有的子级元素

      //判断父级元素中有没有第一个子元素

      while (my$("dv").firstElementChild) {

        my$("dv").removeChild(my$("dv").firstElementChild);

      }

综合案例：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    div {

      width: 200px;

      height: 200px;

      border: 1px solid pink;

    }

  </style>

</head>

<body>

  <input type="button" value="显示效果" id="btn" />

  <input type="button" value="干掉第一个子元素" id="btn2" />

  <input type="button" value="干掉所有子元素" id="btn3" />

  <div id="dv"></div>

  <script src="common.js"></script>

  <script>

    var i = 0;

    my$("btn").onclick = function () {

      i++;

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

      obj.type = "button";

      obj.value = "按钮" + i;

      //my$("dv").appendChild(obj);//追加子元素

      //把新的子元素插入到第一个子元素的前面

      my$("dv").insertBefore(obj, my$("dv").firstElementChild);

      //my$("dv").replaceChild();---自己玩

    };

    my$("btn2").onclick = function () {

      //移除父级元素中第一个子级元素

      my$("dv").removeChild(my$("dv").firstElementChild);

    };

    my$("btn3").onclick = function () {

      //点击按钮删除div中所有的子级元素

      //判断父级元素中有没有第一个子元素

      while (my$("dv").firstElementChild) {

        my$("dv").removeChild(my$("dv").firstElementChild);

      }

    };

  </script>

</body>

</html>

如果只创建一个元素，如何操作？

有则删除----->先判断有没有,有就删除,然后再创建
 
 
有则删除,无则创建

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    div {

      width: 200px;

      height: 200px;

      border: 1px solid red;

    }

  </style>

</head>

<body>

  <input type="button" value="显示效果" id="btn" />

  <div id="dv"></div>

  <script src="common.js"></script>

  <script>

    //有则删除,无则创建

    //先判断有没有,有就删除,然后再创建

    my$("btn").onclick = function () {

      //判断,div中有没有这个按钮,有就删除

      //判断这个按钮的子元素是否存在

      if (my$("btn2")) {//如果为true就有

        my$("dv").removeChild(my$("btn2"));

      }

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

      obj.type = "button";

      obj.value = "按钮";

      obj.id = "btn2";

      my$("dv").appendChild(obj);

    };

  </script>

</body>

</html>

反之：无则创建，如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    div {

      width: 200px;

      height: 200px;

      border: 1px solid red;

    }

  </style>

</head>

<body>

  <input type="button" value="显示效果" id="btn" />

  <div id="dv"></div>

  <script src="common.js"></script>

  <script>

    my$("btn").onclick = function () {

      //判断这个按钮的子元素是否存在

      if (!my$("btn2")) {//如果为true就有

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

        obj.type = "button";

        obj.value = "按钮";

        obj.id = "btn2";

        my$("dv").appendChild(obj);

      }

    };

  </script>

</body>

</html>

JS---DOM---元素相关的操作方法的更多相关文章

  1. js DOM优化相关探索

    我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...

  2. 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners

    偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...

  3. JS DOM元素的操作（创建，添加，删除，和修改属性）

    1.1 创建 DOM 元素以及相应的追加方式 1.1.1  创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...

  4. JS DOM元素

    // 为element增加一个样式名为newClassName的新样式 function addClass(element, newClassName) { var value = element.c ...

  5. js DOM 元素ID就是全局变量

    有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再 ...

  6. JS DOM视频相关的知识

    1.实现点击a标签改变图片时,如果a的href属性有一个目标网址,但是点击又必须跳转到另外一张图,往往会最后跳转到目标网址,可以在onclick事件函数中加入ruturn false,阻止跳转到页面. ...

  7. js dom元素加载完成执行

    //dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...

  8. 第六章 组件 67 使用ref获取DOM元素和组件引用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  10. riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

    前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...

随机推荐

  1. mysql数据库命令

    删除一个表: drop table if exists 表名; 在表中插入行: Insert into 表名 values(, , ,) 创建表: Create table 表名( Id int(10 ...

  2. Xcode中.a文件引起的错误

    一.     TARGETS -> Build Settings-> Search Paths下 1．  Library Search Paths 删除不存在的路径,保留.a文件的路径(此 ...

  3. CryptoJS中WordArray

    目录 WordArray (An array of 32-bit words. 1.1 : 初始化 1.2 : WordArray 对象 ->16进制字符串 1.3 : 16进制字符串 -> ...

  4. Proxmox VE虚拟化管理平台-相关概念

    请阅读此文用户务必阅读以下链接,其中包含了汉化作者.张自然copy过来的原因等信息. www.zhangziran.com/proxmox-docs-zh-cn.htm a Proxmox VE 集群 ...

  5. 深度优先搜索 & 广度优先搜索

    目录 邻接表 邻接表的深度优先搜索 邻接表的广度优先搜索 临接数组 临接数组的深度优先搜索 临接数组的广度优先搜索 二叉树 二叉树的深度优先搜索 二叉树的广度优先搜索 邻接表 邻接表的深度优先搜索 假 ...

  6. wxxcx_learn

    32个字符组成的一组随即字符串 function getRandChar($length){ $str = null; $strPol = "ABCDEFGHIJKLMNOPQRSTUVWX ...

  7. 微服务架构 SpringBoot（二）

    第二天内容:想来想去玩个ssm小demo吧 1.创建表 2..引入相关mybatis 数据库jar: <!--mybatis --> <dependency> <grou ...

  8. 使用 API 网关构建微服务-2

    「Chris Richardson 微服务系列」使用 API 网关构建微服务 Posted on 2016年5月12日 编者的话|本文来自 Nginx 官方博客,是微服务系列文章的第二篇,本文将探讨: ...

  9. 暴力破解（ Hydra | Medusa）

    暴力破解 By : Mirror王宇阳 笔者告知 : 暴力破解的结果是运气和速度的结晶,开始暴力破解前烧一炷香也是必要的! 引用张炳帅的一句话:"你的运气和管理员的安全意识成正比" ...

  10. Android 共享参数 SharedPreferences

    完成共享参数的读写 public class SharedPreference { private Context context; public SharedPreference(Context c ...