上次提到我们要自己封装dom操作里没有的insertAfter元素后插入的元素的方法 现在小曹来实现啦！直接上代码：
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
<body> <div> <a></a> <span></span> <li></li> </div> <!-- 任务 需要封装一个insertAfter的dom操作元素 --> <script> // 具体分析 比如实现a后面插入元素，那么实际上也是a的下一个元素的前面插入 可以用到InsertBefore方法 // 问题：如果元素已经是最后一个了 此时下一个没有元素了 如果这种情况直接用父元素的appendChild方法push进去就好了 // 代码：reference参照物 Element.prototype.insertAfter = function (target, reference) {
var el = reference.nextElementSibling if (el == null) this.appendChild(target) else this.insertBefore(target, el) return target }
var div = document.getElementsByTagName('div')[0] var a = document.getElementsByTagName('a')[0] var span = document.getElementsByTagName('span')[0] var li = document.getElementsByTagName('li')[0] // 接下来大家可以自己去试试哈 比如 div.insertAfter(a,span) 或者div.insertAfter(span,li) </script> </body>
</html> 更多前端知识，欢迎留言，小曹会一一回复的哦！感谢收看！