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. 重磅!华为云社区·CSDN【寻找黑马程序员】有奖征文活动奖项公布!!

    华为云社区·CSDN[寻找黑马程序员]第一期有奖征文活动在大家的鼎力支持下顺利落幕啦,非常感谢大家一直以来的支持~现在小宅就要隆重公布本次活动的奖项了!! 请各位获奖的伙伴在8月18日前私信联系提供联 ...

  2. 了解 MongoDB 看这一篇就够了【华为云分享】

    目录 一.简介 二.基本模型 BSON 数据类型 分布式ID 三.操作语法 四.索引 索引特性 索引分类 索引评估.调优 五.集群 分片机制 副本集 六.事务与一致性 一致性 小结 一.简介 Mong ...

  3. 【nodejs原理&源码赏析(1)】Express中间件系统的基本实现

    一直觉得express的中间件系统这种流式处理非常形象,就好像加工流水线一样,每个环节都在针对同一个产品的不同部分完成自己的工作,最后得到一个成品.今天就来实现一个简易的[中间件队列]. 一. API ...

  4. MySQL必知必会(汇总数据, 聚集函数)

    SELECT AVG(prod_price) AS avg_price FROM products; #AVG只能用于单个列求平均值,如想计算多个列,必须用多个AVG() SELECT AVG(pro ...

  5. iOS本地数据存储

    http://www.jianshu.com/p/a3eeae99e902 大牛整理的超全

  6. iOS包管理工具Cocoapods的安装与使用

    转自:http://www.sxt.cn/u/10014/blog/6448 在我们开发移动应用的时候,一般都会使用到第三方工具,而由于第三方类库的种类繁多,我们在项目中进行管理也会相对麻烦,所以此时 ...

  7. 什么是RESTful?RESTfule风格

    导读 理解什么是REST之前,先去脑补以下什么是HTTP,参考[Http协议] 什么是REST? REST(英文:Representational State Transfer,简称REST,意思:表 ...

  8. 支付宝支付功能(使用支付宝sdk)

    1.准备参数        新建一个公共参数配置类NewAlipayconfig (可将参数存放到config配置文件中读取)          public class NewAlipayconfi ...

  9. vue中$attrs和$listeners以及inheritAttrs的用法

    官方文档说明: 一.解释:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外). 意思就是父组件往子组件传没有在props里声明过的值时,子组件可以通 ...

  10. java基础篇一

    引言 本人系南京一小小学校的大三小小菜鸟,三年来学了很多杂七杂八的,也荒废了大量的时间,马上就要秋招了,之前也看了不少面试题,备选了一些简单的项目,看了不知多少本的几百页厚的各种知识的pdf电子书,发 ...