【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用

这几天看书看到这几个属性做几个笔记

parentNode:顾名思义,就是获取某元素的父元素等同于jq的parent().

lastChild:获取最后一个子元素.

appendChild:在某元素内最后面添加一个子元素.

insertBefore:在某元素外的 前面添加一个元素. 此函数有两个参数insertBefore(newelem,targetelem),newelem是要插入的元素,targetelem是与newelem相对的

元素,调用此方法必须用 targetelem的父元素调用 即targetelem.parentNode

nextSibling:获取某元素的下一个兄弟元素.

关于添加元素这里就有一个疑问了 既然有insertBefore 那么肯定有insertAfter 吧?但毕竟这是js 并不是jq 所以一切并没有那么完美

所以既然没有我们就造出来呗!

先上一个js 代码

function insertAfter(newelem,targetelem){

   var parent = targetelem.parentNode;//获取目标元素的父元素
   if (parent.lastChild == targetelem) {
        parent.appendChild(newelem);
   } else {
        parent.insertBefore(newelem,targetelem.nextSibling);
   }

}

代码是怎么一回事呢分析一下

首先这个方法有两个参数 newelem 和 targetelem

newelem 是你想插入的元素 而 targetelem 是你插入新元素的对照物

这个方法的意义就在于 你要把newelem插入到targetelem的后面,但是要实现还谈何容易所以还要写一下的判断:

1.获取targetelem 的父元素 (用到了parentNode 方法)并且储存在变量parent 里面

2.对父元素进行判断,如果targetelem是它的父元素的最后一个子元素 那么它的父元素直接调用 appendChild 方法 将newelem插入到最后

3.如果不是的话 parent调用insertBefore 将 newelem 插入到 targetelem 的下一级同辈元素的前面

大功告成~~

时间: 10-19

【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用的相关文章

笔记-[js兼容]-滚动条的滚动距离的兼容性问题解决方法。

在我们操作JS实现些效果的时候,可能会涉及到滚动条滚动距离的问题; 在IE和非IE下是存在兼容性问题的 在IE下支持:document.body.scrollTop(scrollLeft);//在ie下获取滚动条距离的属性 在非IE下支持:document.documentElement.scrollTop(scrollLeft);//在非ie下获取滚动条距离的属性 代码兼容: var scrollTop;//定义一个变量名为scrollTop为滚动条的距离 滚动高度 :  var scroll

js拾遗:appendChild 添加移动节点

原文:js拾遗:appendChild 添加移动节点 写js一年多了,一直以为自己很牛逼,开始写各种博文分享,昨天写了一篇<浅谈 IE下innerHTML导致的问题>在看了下面的评论,我才发现自己是多么无知.于是我回头翻阅了下 MDN,Node.appendChild 里面一开始就明确说了,"如果该节点已经存在,则从当前父节点中删除,然后添加到新的父节点."简单来说就是移动当前节点的意思,所以昨天的代码里去掉 obox.innerHTML = ""; 即

读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

读书笔记 - js高级程序设计 - 第十三章 事件 canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好 有时候即使浏览器支持,操作系统如果缺缺乏必要的绘图驱动程序,则浏览器即使支持了也没用   <canvas> var drawing = document.getElementById("drawing"); if( drawing.getContext ){ drawing.getContext("2d"

JavaScript学习笔记——js变量的布尔值

typeof(1): numbertypeof(NaN): numbertypeof(Number.MIN_VALUE): numbertypeof(Infinity): numbertypeof("123"): stringtypeof(true): booleantypeof(window): objecttypeof(Array()): objecttypeof(function(){}): functiontypeof(document): objecttypeof(null)

JQuery之append和appendTo的区别,还有js中的appendChild用法

JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的对象 实例: $('#a').append('content'); $('<div>content</div>').appendTo($('#a')); 注意appendTo前面一定要是Jquery对象. appendChild(Node)这个 方法一般是在指定元素节点的最后一个子节点

工作笔记---js时间插件的使用

工作中用到日期时间插件,需要精确到秒,总结工作所得,标记... 第一种,jquery-datapicker(默认是年月日),加上扩展jquery-ui-timepicker-addon.js(可以实现时分秒) 需要引入的相关js: 1 <link rel="stylesheet" type="text/css" href="css/jquery.ui.custom.min.css" /> 2 <script type="

读书笔记:js设计模式

面向过程编程,面向对象编程和函数式编程> 定义一个类方法1:function Anim(){ } Anim.prototype.start = function(){ .. };Anim.prototype.stop = function(){ .. }; 或者方法2:function Anim(){ .. }Anim.prototype = { start: function(){.. }, stop: function(){ .. }, constructor: Anim} 或者方法3://

js:插入节点appendChild insertBefore使用方法

首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在已有的子节点前插入一个新的子节点.语法 :insertBefore(newchild,refchild) 相同之处:插入子节点 不同之处:实现原理方法不同.  appendChild 方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点来说).  insertBefore  方法是在已有的节

[js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用

本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用 一.appendChild: 向元素的内部最后面增加一个节点,或者移动一个现有的节点到元素的内部最后面 用法: someNode.appendChild( newNode ) someNode通常为元素的父节点 返回值: 返回新增加的节点  1     <i