往某个元素内部的结尾添加
append()
appendTo()
append()
<body>

    <button id="bt1">点击通过jQuery的append添加元素</button>

    <div class="content"></div>

    <script type="text/javascript">

        $("#bt1").on('click', function() {

            //.append(), 内容在方法的后面，

            //参数是将要插入的内容。

            $(".content").append('<div class="append">通过append方法添加的元素</div>')

        })

    </script>

</body>
appendTo()
<body>

    <button id="bt2">点击通过jQuery的appendTo添加元素</button>

    <div class="content"></div>

    <script type="text/javascript">

        $("#bt2").on('click', function() {

            //.appendTo()刚好相反，内容在方法前面，

            //无论是一个选择器表达式 或创建作为标记上的标记

            //它都将被插入到目标容器的末尾。

            $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))

        })

    </script>

</body>
往某个元素的前后添加，被添加元素在前面
before()
after()
before()
<body>

    <button id="bt1">点击通过jQuery的before添加元素</button>

    <div class="aaron">

        <p class="test1">测试before</p>

    </div>

    <script type="text/javascript">

        $("#bt1").on('click', function() {

            //在匹配test1元素集合中的每个元素前面插入p元素

            $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')

        })

    </script>

</body>
after()
<body>

    <button id="bt2">点击通过jQuery的after添加元素</button>

    <div class="aaron">

        <p class="test2">测试after</p>

    </div>

    <script type="text/javascript">

    $("#bt2").on('click', function() {

        //在匹配test1元素集合中的每个元素后面插入p元素

        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')

    })

    </script>

</body>
往某个元素的前后添加，被添加元素在后面
insertBefore()
insertAfter()
insertBefore()
<body>

    <button id="bt1">点击通过jQuery的insertBefore添加元素</button>

    <div class="aaron">

        <p class="test1">测试insertBefore,不支持多参数</p>

    </div>

    <script type="text/javascript">

        $("#bt1").on('click', function() {

            //在test1元素前后插入集合中每个匹配的元素

            //不支持多参数

            $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))

        })

    </script>

</body>
insertAfter()
<body>

    <button id="bt2">点击通过jQuery的insertAfter添加元素</button>

    <div class="aaron">

        <p class="test2">测试insertAfter,不支持多参数</p>

    </div>

    <script type="text/javascript">

    $("#bt2").on('click', function() {

        //在test2元素前后插入集合中每个匹配的元素

        //不支持多参数

        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))

    })

    </script>

</body>
往某个元素内部的首位置添加
prepend()
prependTo()
prepend()
<body>

    <button id="bt1">点击通过jQuery的prepend添加元素</button>

    <div class="aaron1">

        <p>测试prepend</p>

    </div>

    <script type="text/javascript">

    $("#bt1").on('click', function() {

        //在aaron1的首位置添加一个新的p节点，跟append位置相反

        $('.aaron1').prepend('<p>prepend增加的p元素</p>')

    })

    </script>

</body>
prependTo()
<body>

    <div class="aaron2">

        <p>测试prependTo</p>

    </div>

    <script type="text/javascript">

    $("#bt2").on('click', function() {

        //找到class="aaron2"的div节点

        //然后通过prependTo内部的首位置添加一个新的p节点

        $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))

    })

    </script>

</body>

jquery 插入节点的更多相关文章

  1. jQuery插入节点（移动节点）

    jQuery插入节点(移动节点) <%@ page language="java" import="java.util.*" pageEncoding=& ...

  2. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  3. jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  4. jQuery插入节点的方法

    注:摘自<锋利的jQuery(第二版)> append() 向每个匹配的元素内部追加内容:  HTML代码:<p>我想说:</p>jQuery代码:$(" ...

  5. jquery 插入节点的方法

    方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码: <p>我想说:</p> jQuery代码: $("p").append(& ...

  6. jQuery元素节点的插入

    jquery插入节点的的方法,总的来说有8种,但是只要学会了其中的两个就能理解全部了, 这里我们学习append()和appendTo()两个方法: append()方法是向元素的内部追加内容: &l ...

  7. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

  8. jquery插入,复制、替换和删除节点

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. Jquery | 外部插入节点

    after(content) : //在 span 元素外部的后面 插入 "<span><b>Write Less Do More</b><span ...

随机推荐

  1. 大数据 -- Cloudera Manager(简称CM)+CDH构建大数据平台

    一.Cloudera Manager介绍 Cloudera Manager(简称CM)是Cloudera公司开发的一款大数据集群安装部署利器,这款利器具有集群自动化安装.中心化管理.集群监控.报警等功 ...

  2. vue获取不到后端返回的响应头

    Response.ContentType = EPPlusHelpler.ExcelContentType; Response.Headers.Add("FileName", fi ...

  3. [转帖]Zookeeper入门看这篇就够了

    Zookeeper入门看这篇就够了 https://my.oschina.net/u/3796575/blog/1845035 Zookeeper是什么 官方文档上这么解释zookeeper,它是一个 ...

  4. C++ 工程师养成 每日一题third （子数列排序）

    题目: 定义排序子序列为一个数组中一段连续的子序列,并且这段子序列是非递增或者非递减排序的.牛牛有一个长度为n的整数数组A,他现在有一个任务是把数组A分为若干段排序子序列,牛牛想知道他最少可以把这个数 ...

  5. go标准库I/O模型:epoll+多协程

    本文为linux环境下的总结,其他操作系统本质差别不大.本地文件I/O和网络I/O逻辑类似. epoll+多线程的模型 epoll+多线程模型和epoll 单进程区别.优点     对比于redis这 ...

  6. 手把手教你做JavaWeb项目：登录模块

    现如今,无论是客户端还是移动端,无论是游戏登陆还是社交平台登陆,无处不在的“登陆”.那么你知道怎么制作吗?今天就为你娓娓道来: 用户登录 在各大信息管理系统中,登录功能是必不可少的,他的作用就是验证用 ...

  7. 3、Linux目录操作

    1.目录操作概述 2.ls显示目录内容 命令名称:ls 命令英文原意:list 命令所在路径:/bin/ls 执行权限:所有用户 功能描述:显示目录文件 ls  -a    显示目录下的所有文件(包括 ...

  8. 使用Dapper查询记录是否存在

    /// <summary> /// Dapper数据访问抽象基础类 /// </summary> public class DapperHelper { public stat ...

  9. C# vb .net实现透明特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的透明效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...

  10. python 函数的链式调用（一个函数调用使用两个括号）

    # python 函数的链式调用 def funcA(a): def funcB(b): for a_each in a: x = funcB(a_each) return x return func ...