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. spring-MVC_笔记

    需求:客户端发起请求,服务器端接收请求,执行逻辑并进行视图跳转. ①导入SpringMVC相关坐标②配置SpringMVC核心控制器DispathcerServlet ③创建Controller类和视 ...

  2. luogu P2345 奶牛集会 |排序+树状数组

    题目描述 约翰的N 头奶牛每年都会参加"哞哞大会".哞哞大会是奶牛界的盛事.集会上的活动很多,比如堆干草,跨栅栏,摸牛仔的屁股等等.它们参加活动时会聚在一起,第i 头奶牛的坐标为X ...

  3. 学习Java必看的Java书籍（高清中文最新版附下载链接）

    今年下半年,我正式系统地学习Java(之前学习C++).最近把学习Java所用到的书籍整理了一下,分享出来,希望对正在学习或准备学习Java的人有一定的帮助. 关于Java的学习路线,和IDE工具In ...

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

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

  5. 强化学习环境OpenAi搭建，从虚拟机到Gym、Mujoco和mujoco-py的完整安装

    平时不怎么写博客,这次是因为环境的配置花费了我大概一个星期的时间.所以简单的记录一下搭建的整个过程,其中有些部分我直接推荐别人的博客的基本教程,都是我亲自尝试过成功的.同时,也希望这篇博客可以帮到您. ...

  6. tensorflow word2vec详解

    maybe_download 下载text8.zip.可以手工下载下来.然后指定text8.zip的路径. read_data 解压text8.zip,把数据读入到data中. data是一个长数组, ...

  7. 大数据学习笔记——Hadoop编程实战之Mapreduce

    Hadoop编程实战——Mapreduce基本功能实现 此篇博客承接上一篇总结的HDFS编程实战,将会详细地对mapreduce的各种数据分析功能进行一个整理,由于实际工作中并不会过多地涉及原理,因此 ...

  8. 如何上传项目到github

    喜欢的同学可以看一下原文,讲得更加详细哦 原文地址:http://www.cnblogs.com/cxk1995/p/5800196.html 首先你需要一个github账号,所有还没有的话先去注册吧 ...

  9. IUSEP研修报告

    目录 Introduction Alberta - Edmonton University of Alberta IUSEP Schoolwork and Project Principle of F ...

  10. VUEday01

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