封装一个方法insertAfter,功能类似insertBefore
我们知道 DOM 提供了 insertBefore 函数, 用于在已有的元素前插入一个新元素, 而 DOM 本身并没有提供一个 insertAfter 函数用于在已有元素后插入一个新元素, 可通过现有的 DOM 方法和属性自己手动封装一个 insertAfter 函数.
<div>
<i></i>
<b></b>
<span></span>
</div>
<script>
Element.prototype.insertAfter = function(targetNode, afterNode) {
let beforeNode = afterNode.nextElementSibling;
if (beforeNode == null) {
this.appendChild(targetNode)
} else {
this.insertBefore(targetNode, beforeNode)
}
}
var div = document.getElementsByTagName('div')[0];
var b = document.getElementsByTagName('b')[0];
var span = document.getElementsByTagName('span')[0];
var p = document.createElement('p');
</script>
编程思想
- 我们在原型上面进行编程,这样就有很多好处,那么所有的Dom元素就都会有一个方法,也就是手动封装的InsertAfter
- 我们知道,insertBefore就是在某一个元素前面插入一个元素,那么我们就可以想着一个问题,比如说,现在有1,2,3,4四个元素,怎么在3后面插入一个元素呢,很显然我们没有这个方法,那么我们就可以想着,可以在第4个元素前面插入一个元素,不也就可以实现同样的效果吗
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/38797.html