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. Servlet和Tomcat底层源码分析

    Servlet 源码分析   Servlet 结构图 Servlet 和 ServletConfig 都是顶层接口,而 GenericServlet 实现了这两个顶层接口,然后HttpServlet ...

  2. 第一节知识点：.net与c#的概念

    1.什么是.net          .net一般指的是.NET Framework框架,一种平台,一种技术:.NET 是微软的新一代技术平台,以构建互联互通的应用系统.这些应用程序的开发和运行必须有 ...

  3. PlantUML Viewer Chrome 插件 画时序图

    PlantUML通过简单直观的语言来定义示意图 使用 Chrome+ PlantUML Viewer的插件画图 1,打开chrome网上应用店 2,搜索plantuml viewer 并添加 3,扩展 ...

  4. python做单因素方差分析

    方差分析的主要功能就是验证两组样本,或者两组以上的样本均值是否有显著性差异,即均值是否一样. 这里有两个大点需要注意:①方差分析的原假设是:样本不存在显著性差异(即,均值完全相等):②两样本数据无交互 ...

  5. ARTS-S docker ceontos镜像中使用crontab

    centos镜像中默认没有crontab,需要在dockerflle中通过yum的安装 yum -y install vixie-cron crontabs && yum clean ...

  6. WPF之图片处理系列

    WPF 中的一些图片处理方法 一,视觉处理(控件展示) 1,显示图片 Image控件展示 Xaml代码: <Image source="/Resources/Images/1.png& ...

  7. SQL中Group By和having的用法

    转自 ITGirl笑笑   一.GROUP BY GROUP BY语句用来与聚合函数(aggregate functions such as COUNT, SUM, AVG, MIN, or MAX. ...

  8. 关于toString的自动调用

    class a{ } class b extends a{ String rr = "zzz"; public String toString(){ return "aa ...

  9. django基础之day04知识点----查询相关

    from django.test import TestCase # Create your tests here. ''' 当你想单独测试django中某一个py文件时,你需要手动配置测试文件 在m ...

  10. 在线HTTP POST/GET模拟请求api接口http请求测试工具https://post.jsonin.com/

    在线HTTP POST/GET模拟请求api接口http请求测试工具 在线POST/GET接口测试工具https://post.jsonin.com/ Json在线解析及格式化校验工具 https:/ ...