首页 > 代码库 > 【笔记】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的意义及运用