首页 > 代码库 > 【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用

【笔记】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 的下一级同辈元素的前面

 

大功告成~~

 

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