> javascript教程 > javascript基础教程 >

js缺少insertAfter解决方案

javascript教程
入门篇 导论 js的历史发展 js的语句 js代码用法 js变量 js标识符 js注释 js区块 js if...else结构 js switch结构 js三元运算符 js循环语句 undefined和null 布尔值 整数 浮点数

在现有的方法后插入一个新元素，你可能会想：既然有insertBefore方法，是不是也有一个相应的insertAfter()方法。很可惜，DOM没有提供方法。

下面编写insertAfter函数，虽然DOM本身没有提供，但它确实提供了一个把一个节点插入到另一个节点之后所有工具。我们完全可以利用已有的DOM方法和属性编写一个insertAfter函数：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>

在现有的方法后插入一个新元素，你可能会想：既然有insertBefore方法，是不是也有一个相应的insertAfter()方法。很可惜，DOM没有提供方法。下面编写insertAfter函数，虽然DOM本身没有提供，但它确实提供了一个把一个节点插入到另一个节点之后所有工具。我们完全可以利用已有的DOM方法和属性编写一个insertAfter函数：

  1. <ul>
  2.   <li>1</li>
  3.   <li>2</li>
  4.   <li>3</li>
  5. </ul>
  6. <script>
  7.   function insertAfter(newElement,targetElement){
  8.     var parent = targetElement.parentNode;
  9.     if(parent.lastChild == targetElement){
  10.       parent.appendChild(newElement);
  11.     }else{
  12.       parent.insertBefore(newElement,targetElement.nextSibling);
  13.     }
  14.   }
  15.   var p = document.createElement('p');
  16.   var txt = document.createTextNode('我是新插入的节点');
  17.   p.appendChild(txt);
  20.   var lis = document.getElementsByTagName('li');
  22.   //insertAfter(p,lis[0])
  23. </script>
  24. </body>
  25. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助

下一篇：JavaScript中的reduce()的5个用例 上一篇：JS字符串补全方法padStart()和padEnd()

评论

  • 随机获取
点击刷新
精彩评论

友情链接