1. 追加子元素

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

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

  1.     my$("btn3").onclick = function () {
  2.       //点击按钮删除div中所有的子级元素
  3.       //判断父级元素中有没有第一个子元素
  4.       while (my$("dv").firstElementChild) {
  5.         my$("dv").removeChild(my$("dv").firstElementChild);
  6.       }

综合案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>title</title>
  7.   <style>
  8.     div {
  9.       width: 200px;
  10.       height: 200px;
  11.       border: 1px solid pink;
  12.     }
  13.   </style>
  14. </head>
  15.  
  16. <body>
  17.   <input type="button" value="显示效果" id="btn" />
  18.   <input type="button" value="干掉第一个子元素" id="btn2" />
  19.   <input type="button" value="干掉所有子元素" id="btn3" />
  20.   <div id="dv"></div>
  21.   <script src="common.js"></script>
  22.   <script>
  23.  
  24.     var i = 0;
  25.     my$("btn").onclick = function () {
  26.       i++;
  27.       var obj = document.createElement("input");
  28.       obj.type = "button";
  29.       obj.value = "按钮" + i;
  30.       //my$("dv").appendChild(obj);//追加子元素
  31.       //把新的子元素插入到第一个子元素的前面
  32.       my$("dv").insertBefore(obj, my$("dv").firstElementChild);
  33.       //my$("dv").replaceChild();---自己玩
  34.     };
  35.  
  36.     my$("btn2").onclick = function () {
  37.       //移除父级元素中第一个子级元素
  38.       my$("dv").removeChild(my$("dv").firstElementChild);
  39.     };
  40.  
  41.     my$("btn3").onclick = function () {
  42.       //点击按钮删除div中所有的子级元素
  43.       //判断父级元素中有没有第一个子元素
  44.       while (my$("dv").firstElementChild) {
  45.         my$("dv").removeChild(my$("dv").firstElementChild);
  46.       }
  47.  
  48.     };
  49.   </script>
  50. </body>
  51.  
  52. </html>

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

有则删除----->先判断有没有,有就删除,然后再创建
 
 
  1. 有则删除,无则创建
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <title>title</title>
  8.   <style>
  9.     div {
  10.       width: 200px;
  11.       height: 200px;
  12.       border: 1px solid red;
  13.     }
  14.   </style>
  15. </head>
  16.  
  17. <body>
  18.   <input type="button" value="显示效果" id="btn" />
  19.   <div id="dv"></div>
  20.   <script src="common.js"></script>
  21.   <script>
  22.     //有则删除,无则创建
  23.  
  24.     //先判断有没有,有就删除,然后再创建
  25.     my$("btn").onclick = function () {
  26.       //判断,div中有没有这个按钮,有就删除
  27.       //判断这个按钮的子元素是否存在
  28.       if (my$("btn2")) {//如果为true就有
  29.         my$("dv").removeChild(my$("btn2"));
  30.       }
  31.       var obj = document.createElement("input");
  32.       obj.type = "button";
  33.       obj.value = "按钮";
  34.       obj.id = "btn2";
  35.       my$("dv").appendChild(obj);
  36.     };
  37.  
  38.   </script>
  39. </body>
  40.  
  41. </html>

反之：无则创建，如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>title</title>
  7.   <style>
  8.     div {
  9.       width: 200px;
  10.       height: 200px;
  11.       border: 1px solid red;
  12.     }
  13.   </style>
  14. </head>
  15.  
  16. <body>
  17.   <input type="button" value="显示效果" id="btn" />
  18.   <div id="dv"></div>
  19.   <script src="common.js"></script>
  20.   <script>
  21.  
  22.     my$("btn").onclick = function () {
  23.       //判断这个按钮的子元素是否存在
  24.       if (!my$("btn2")) {//如果为true就有
  25.         var obj = document.createElement("input");
  26.         obj.type = "button";
  27.         obj.value = "按钮";
  28.         obj.id = "btn2";
  29.         my$("dv").appendChild(obj);
  30.       }
  31.  
  32.     };
  33.  
  34.   </script>
  35. </body>
  36.  
  37. </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. MyCat学习 ------分库分表 随笔

    垂直切分.水平切分 1.垂直分库,解决库中表太多的问题. 2.垂直分表,解决表中列太多的问题.例如 商品表 包含 产地.二维码 .时间.价格.各个列.分为不同的小表. 水平切分, 大数据表拆分为小表 ...

  2. CollectionView常用的布局方式总结

    结合网上的collectionView常用布局整合的collectionView使用工具 下载地址 支持五种布局方式ZFCollectionViewLayoutType有两种ZFCollectionV ...

  3. NSURLSession使用(整理版)

    NSURLSession使用 1.NSURLSession诞生于2013年,但其在前几年一直生活在NSURLConnection的阴影下,直到iOS9的出现,NSURLConnection被官方宣布弃 ...

  4. [TimLinux] Python 元类

    1. type函数 name = "This is a string" print(type(name)) # <class 'str'> print("*& ...

  5. 强化学习七 - Policy Gradient Methods

    一.前言 之前我们讨论的所有问题都是先学习action value,再根据action value 来选择action(无论是根据greedy policy选择使得action value 最大的ac ...

  6. String and Arrays

    Description 有一个N*N的字符矩阵,从上到下依次记为第1行,第2行,--,第N行,从左至右依次记为第1列,第2列,--,第N列.    对于这个矩阵会进行一系列操作,但这些操作只有两类:  ...

  7. GlusterFS缺陷

    glusterfs缺陷 转自:http://www.liuwq.com/2017/04/20/glusterfs%E8%AF%A6%E8%A7%A3/ glusterfs 原理.优势.使用范围等 Gl ...

  8. Orleans[NET Core 3.1] 学习笔记（一）.NET环境下的分布式应用程序

    前言 Orleans是一个跨平台的框架,用于搭建可扩展的分布式应用程序 第一次接触Orleans还是两年前做游戏服务器的时候,用SignalR+Orleans的组合,写起代码来不要太爽. 即将进入20 ...

  9. 使用FileReader在浏览器读取预览文件(image和txt)

    如标题,之前在某个地方看到因为有Blob的存在,理论上可以在浏览器上查看所有格式的文件.自己想着试试现在暂时只能够查看图片和预览txt文件.其他的比如doc,docx格式的文件查看的时候是乱码 如图: ...

  10. wxxcx_learn异常处理

    属于基础框架,分级别 捕获异常,处理异常(记录日志,修复异常,返回客户端错误),抛出异常 全局异常处理(AOP)对错误同一格式化 try{ $banner = BannerModel::getBann ...