js封装一个insertAfter方法
2019-01-21 本文已影响0人
阿平搞Python
在js的dom操作中，大家应该都非常熟练的使用insertbefore(),可在已有的子节点前插入一个新的子节点。如果在已有的子节点后插入一个新的子节点，该怎么做呢？很多人可能会说有了insertbefore()不就够用了，要其他花里胡哨的方法干什么。问题不在此，在于很多人面试前端开发的工作，有很多面试官就出了这样一道题，现场封装一个insertAfter方法。
思路：①有标签1，2。向标签1后插入标签<p>,我们可以利用insertbefore()，而是向标签2前面插入标签<p>。
②如果标签1后面任何兄弟标签都没有我们直接利用appendChild，添加兄弟标签。
代码如下：
<body>
<div>
<i></i>
<b></b>
<span></span>
</div>
<script type="text/javascript">
Element.prototype.insertAfter=function(targetNode,afterNode){
var 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>
</body>
结果图片
