1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js中常用追加元素的几种方法</title>
  6.     <link rel="stylesheet" href="css/rest.css"/>
  7.     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  8.     <style>
  9.         .container {
  10.             width: 1200px;
  11.             padding: 10px;
  12.             margin: 50px auto;
  13.             border: 1px solid lightcoral;
  14.         }
  16.         #wrap {
  17.             border: 1px solid lightseagreen;
  18.         }
  20.         .container p {
  21.             height: 30px;
  22.             line-height: 30px;
  23.         }
  25.         .btn-group {
  26.             margin-top: 20px;
  27.         }
  29.         button {
  30.             width: 80px;
  31.             height: 32px;
  32.             margin-right: 10px;
  33.             line-height: 32px;
  34.             text-align: center;
  35.             border: 0px;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40. <div class="container">
  41.     <div id="wrap">
  42.         <p class="first">我是第一个子元素</p>
  43.         <p class="second">我是第二个子元素</p>
  44.     </div>
  45.     <div class="btn-group">
  46.         <button class="append">append</button>
  47.         <button class="appendTo">appendTo</button>
  48.         <button class="prepend">prepend</button>
  49.         <button class="prependTo">prependTo</button>
  50.         <button class="after">after</button>
  51.         <button class="before">before</button>
  52.         <button class="appendChild" οnclick="appChild()">appendChild</button>
  53.         <button class="insertAfter">insertAfter</button>
  54.         <button class="insertBefore">insertBefore</button>
  55.     </div>
  56. </div>
  57. </body>
  58. </html>
  59. <script src="js/jquery-1.9.1.min.js"></script>
  60. <script>
  61.     $(function () {
  62.         //append(),在父级最后追加一个子元素
  63.         $(".append").click(function () {
  64.             $("#wrap").append("<p class='three'>我是子元素append</p>");
  65.         });
  66.         //appendTo(),将子元素追加到父级的最后
  67.         $(".appendTo").click(function () {
  68.             $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));
  69.         });
  70.         //prepend(),在父级最前面追加一个子元素
  71.         $(".prepend").click(function () {
  72.             $("#wrap").prepend("<p class='three'>我是子元素prepend</p>");
  73.         });
  74.         //prependTo(),将子元素追加到父级的最前面
  75.         $(".prependTo").click(function () {
  76.             $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));
  77.         });
  78.         //after(),在当前元素之后追加（是同级关系）
  79.         $(".after").click(function () {
  80.             $("#wrap").after("<p class='siblings'>我是同级元素after</p>");
  81.         });
  82.         //before(),在当前元素之前追加（是同级关系）
  83.         $(".before").click(function () {
  84.             $("#wrap").before("<p class='siblings'>我是同级元素before</p>");
  85.         });
  86.         //insertAfter(),将元素追加到指定对象的后面（是同级关系）
  87.         $(".insertAfter").click(function () {
  88.             $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));
  89.         });
  90.         //insertBefore(),将元素追加到指定对象的前面（是同级关系）
  91.         $(".insertBefore").click(function () {
  92.             $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));
  93.         });
  94.     });
  96.     //appendChild(),在节点的最后追加子元素
  97.     function appChild() {
  98.         // 创建p节点
  99.         var para = document.createElement("p");
  100.         // 创建文本节点
  101.         var node = document.createTextNode("我是子集appendChild新段落。");
  102.         // 把文本节点添加到p节点里
  103.         para.appendChild(node);
  104.         // 查找div1
  105.         var element = document.getElementById("wrap");
  106.         // 把p节点添加到div1里
  107.         element.appendChild(para);
  108.     }
  109. </script>

js中常用追加元素的几种方法的更多相关文章

  1. js中删除数组元素的几种方法

    1:js中的splice方法 splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 inde ...

  2. jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）

    最近项目不是很忙,抽空整理了下,js中常用追加元素的几种方法. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  3. python中删除某个元素的3种方法

    python中关于删除list中的某个元素,一般有三种方法:remove.pop.del 1.remove: 删除单个元素,删除首个符合条件的元素,按值删除 举例说明: >>> st ...

  4. JS中常用的输出方式(五种)

    1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...

  5. JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

  6. js中判断对象类型的几种方法

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  7. Java之——删除ArrayList中的反复元素的2种方法

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47414935 ArrayList是Java中最经常使用的集合类型之中的一个.它同意 ...

  8. js中字符串转换为数值的两种方法的区别

    在js中字符串转换为数值的方法有三种:转换函数,强制类型转换,隐式转换 1.转换函数 parseInt()   //将字符串转换为整型 parseFloat()  //将字符串转换为浮点型 转换函数在 ...

  9. JS中date日期初始化的5种方法

    创建一个日期对象: 代码如下: var objDate=new Date([arguments list]); 参数形式有以下5种: 1)new Date("month dd,yyyy hh ...

随机推荐

  1. 1款开源工具，实现自动化升级K3S集群！

    即便你的集群能够平稳运行,Kubernetes升级依旧是一项艰难的任务.由于每3个月Kubernetes会发布一个新版本,所以升级是十分必要的.如果一年内你不升级你的Kubernetes集群,你就会落 ...

  2. ECharts的基本使用与方法

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度 ...

  3. 第 16 章 【硬核!】 垃圾回收相关 GC细讲

    第 16 章 垃圾回收相关概念 1.System.gc() 的理解 1.1.System.gc() 方法 System.gc() 方法 在默认情况下,通过System.gc()者Runtime.get ...

  4. C# 托管与非托管类型 堆和栈 值类型与引用类型 装箱与拆箱

    一.托管类型与非托管类型 1.托管类型 托管类型包括 引用类型 以及 包含有引用类型或托管类型成员的结构. 引用类型 含引用类型或托管类型成员(字段.自动实现 get 访问器的属性)的结构 // 托管 ...

  5. umi-request 统一异常处理实践

    首发于语雀文档 前言 本人在工作中用到了 umi-request,百度谷歌搜了一遍,感觉都没找到超过 3 篇合适且含代码的文章,因此只能自行实践总结了. umi-request 有点不同 umi-re ...

  6. java斐波纳契数列

    //斐波纳契数列,又称黄金分割数列,指的是这样一个数列:1.1.2.3.5.8.13.21.-- 这个数列从第三项开始,每一项都等于前两项之和. public class DiGui { public ...

  7. Selenium执行JavaScript脚本

    JavaScript是运行在客户端(浏览器)和服务器端的脚本语言,允许将静态网页转换为交互式网页.可以通过 Python Selenium WebDriver 执行 JavaScript 语句,在We ...

  8. 关于Byte(1) 与int (1) 比较原理

    最近笔者遇到一个问题 Integer cameraType=1 if (cameraType.intValue() == SourceTypeEnum.ANFANG.getType(){ } 枚举值是 ...

  9. Spring中ApplicationContextAware接口的用法

    1.为什么使用AppplicationContextAware? ApplicationContext的BeanFactory 的子类, 拥有更强大的功能,ApplicationContext可以在服 ...

  10. Spark RDD批量写入Hbase