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. luogu P5414 [YNOI2019]排序 |动态规划

    题目描述 对于一个数列{7, 1, 2, 3}进行排序,我们可以把7 从头移动到尾.但是这个操作的成本是7,并不是最佳的.最佳的排序方式是将连续的1.2.3 移动到7 的前面.这样的话,总的操作成本就 ...

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

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

  3. 信鸽推送Push API

    目录 信鸽推送 push API 0. 基本 push 1. 根据 token list,推送到android和ios 2. 推送到android和ios 所有用户 信鸽推送 push API 参考: ...

  4. react-native 信鸽推送集成

    目录 一. git链接: react-native-xinge-push 1.1 安装 1.2. link 二. android配置 2.1. android/settings.gradle 2.2. ...

  5. CoderForces999E-Reachability from the Capital

    E. Reachability from the Capital time limit per test 2 seconds memory limit per test 256 megabytes i ...

  6. HDU-3339 IN ACTION（Dijkstra +01背包）

      Since 1945, when the first nuclear bomb was exploded by the Manhattan Project team in the US, the ...

  7. seaborn 数据可视化(二）带有类别属性的数据可视化

    Seaborn的分类图分为三类,将分类变量每个级别的每个观察结果显示出来,显示每个观察分布的抽象表示,以及应用统计估计显示的权重趋势和置信区间: 第一个包括函数swarmplot()和stripplo ...

  8. CYPRESS最新的USB3.0控制器

    CYPRESS近日发布了其最新的USB3.0控制器,产品序号为CX3,主要是针对高像素摄像头方面的应用,接口支持MIPI的CSI-2,并不支持传统的基于并口的数据传输模式. MIPI(Mobile I ...

  9. Oracle常用函数(略微少了点 不过是自己稍微整理的)

    DECODE ​ DECODE(value ,if 1, then 1,if 2,then 2, ....,else) ​ 解析: ​ if 条件=1 ​ return (value 1) ​ if条 ...

  10. Linux 内存映射函数 mmap（）函数详解

    mmap将一个文件或者其它对象映射进内存.文件被映射到多个页上,如果文件的大小不是所有页的大小之和,最后一个页不被使用的空间将会清零.mmap在用户空间映射调用系统中作用很大.头文件 <sys/ ...