直接运行

  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.         <style>
  8.             .container {
  9.                 width: 1200px;
  10.                 padding: 10px;
  11.                 margin: 50px auto;
  12.                 border: 1px solid lightcoral;
  13.             }
  14.             #wrap{
  15.                 border: 1px solid lightseagreen;
  16.             }
  17.             .container p{
  18.                 height: 30px;
  19.                 line-height: 30px;
  20.             }
  21.             .btn-group{
  22.                 margin-top: 20px;
  23.             }
  24.             button{
  25.                 width: 80px;
  26.                 height: 32px;
  27.                 margin-right: 10px;
  28.                 line-height: 32px;
  29.                 text-align: center;
  30.                 border: 0px;
  31.             }
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <div class="container">
  36.             <div id="wrap">
  37.                 <p class="first">我是第一个子元素</p>
  38.                 <p class="second">我是第二个子元素</p>
  39.             </div>
  40.             <div class="btn-group">
  41.                 <button class="append">append</button>
  42.                 <button class="appendTo">appendTo</button>
  43.                 <button class="prepend">prepend</button>
  44.                 <button class="prependTo">prependTo</button>
  45.                 <button class="after">after</button>
  46.                 <button class="before">before</button>
  47.                 <button class="appendChild" onclick="appChild()">appendChild</button>
  48.                 <button class="insertAfter">insertAfter</button>
  49.                 <button class="insertBefore">insertBefore</button>
  50.             </div>  
  52.         </div>  
  54.     </body>
  55. </html>
  56. <script src="js/jquery-1.9.1.min.js"></script>
  57. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  58. <script>
  59.     $(function(){
  60.         //append(),在父级最后追加一个子元素
  61.         $(".append").click(function(){
  62.             $("#wrap").append("<p class='three'>我是子元素append</p>");
  63.         });  
  65.         //appendTo(),将子元素追加到父级的最后
  66.         $(".appendTo").click(function(){
  67.             $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));
  68.         });  
  70.         //prepend(),在父级最前面追加一个子元素
  71.         $(".prepend").click(function(){
  72.             $("#wrap").prepend("<p class='three'>我是子元素prepend</p>");
  73.         });  
  75.         //prependTo(),将子元素追加到父级的最前面
  76.         $(".prependTo").click(function(){
  77.             $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));
  78.         });  
  80.         //after(),在当前元素之后追加（是同级关系）
  81.         $(".after").click(function(){
  82.             $("#wrap").after("<p class='siblings'>我是同级元素after</p>");
  83.         });  
  85.         //before(),在当前元素之前追加（是同级关系）
  86.         $(".before").click(function(){
  87.             $("#wrap").before("<p class='siblings'>我是同级元素before</p>");
  88.         });  
  90.         //insertAfter(),将元素追加到指定对象的后面（是同级关系）
  91.         $(".insertAfter").click(function(){
  92.             $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));
  93.         });
  94.         //insertBefore(),将元素追加到指定对象的前面（是同级关系）
  95.         $(".insertBefore").click(function(){
  96.             $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));
  97.         });
  98.     });   
  100.     //appendChild(),在节点的最后追加子元素
  101.     function appChild(){
  102.             // 创建p节点
  103.             var para=document.createElement("p");
  104.             // 创建文本节点
  105.             var node=document.createTextNode("我是子集appendChild新段落。");
  106.             // 把文本节点添加到p节点里
  107.             para.appendChild(node);  
  109.             // 查找div1
  110.             var element=document.getElementById("wrap");
  111.             // 把p节点添加到div1里
  112.             element.appendChild(para);
  113.     }
  114. </script>

js追加元素的更多相关文章

  1. js追加元素，以及元素位置

    function setShow(val_param,text){ var ul = document.getElementById("copyhere"); //<li&g ...

  2. js中常用追加元素的几种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jquery 元素控制(追加元素/追加内容)介绍及应用

    http://blog.csdn.net/gisredevelopment/article/details/41126533 一.在元素内部/外部追加元素 append,prepend:添加到子元素  ...

  4. 使用 append 方法追加元素

    来自于<sencha touch 权威指南> 学习使用 Ext.DomHelper 组件在页面中追加元素.app.js代码如下: Ext.require(['Ext.form.Panel' ...

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

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

  6. jquery 元素控制(追加元素/追加内容)

    参考网址:http://www.jquerycn.cn/a_5521 一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: ...

  7. paip.调试js 查看元素事件以及事件断点

    paip.调试js  查看元素事件以及事件断点 ff 26 +firebug 查看不出来.. 360 ,虽然也是chrome 基础,但是开发工具烂阿,也是显示不出来.. 作者Attilax  艾龙,  ...

  8. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  9. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

随机推荐

  1. C#实现简单的串口通信

    前言 本着学习研究的态度,用c#语言实现简单的串口通信工具. 一.串口通信原理 串口通信 串口通信(Serial Communications)的概念非常简单,串口按位(bit)发送和接收字节.尽管比 ...

  2. TCP协议和UDP协议

    一:TCP(Transmission Control Protocol)  传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 第一次握手:主机A发送 ...

  3. LoadRunner结果分析 – TPS

    针对吞吐率和 TPS 的关系,这个在结果分析中如何使用,就个人经验和朋友讨论后,提出如下建议指导,欢迎同僚指正. 相关定义 响应时间 = 网络响应时间 + 应用程序响应时间 响应时间 =(N1+N2+ ...

  4. 洛谷 1144 最短路计数 bfs

    洛谷1144 最短路计数 传送门 其实这道题目的正解应该是spfa里面加一些处理,,然而,,然而,,既然它是无权图,,那么就直接bfs了,用一个cnt记录一下每一个点的方案数,分几种情况讨论一下转移, ...

  5. C#--二维码生成代码

    需要用到ThoughtWorks.QRCode.dll文件 string str = Server.UrlDecode(Request.QueryString["id"]); QR ...

  6. A server is already running. Check tmp/pids/server.pid.

    A server is already running. Check  tmp/pids/server.pid. 把server.pid删除: 学习了: http://stackoverflow.co ...

  7. bash脚本编程知识储备

    bash脚本编程:     脚本程序:解释器解释执行: 首先得理清一些琐碎的知识点,我尽量把我所学的帮朋友一起梳理一下 编程环境:(我会在接下来的篇章,图文例子三结合的方式带大家一起学习)       ...

  8. linux c获取mac

    #include <stdio.h> #include <string.h> #include <net/if.h> #include <sys/ioctl. ...

  9. iOS多线程与网络开发之解析json数据

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. // 同步发送信息 2 NSData *data = [NSURLConnection sendSynchronousRequest:request r ...

  10. 线程基础：JDK1.5+（8）——线程新特性（上）

    1.概要 假设您阅读JAVA的源码.出现最多的代码作者包含:Doug Lea.Mark Reinhold.Josh Bloch.Arthur van Hoff.Neal Gafter.Pavani D ...