方法 描述 示例
append() 向每个匹配的元素内部追加内容

HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").append("<b>你好</b>")

结果：

<p>我想说：<b>你好</b></p>
appendTo()

将所有匹配的元素追加到指定的元素中。

实际上，使用该方法是颠倒了常规的

$(A).append(B)的操作，即不是将B追加到

A中，而是将A追加到B中

HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>").appendTo("p")

结果：

<p>我想说：<b>你好</b></p>
prepend() 向每个匹配的元素内部前置内容

HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").prepend("<b>你好</b>")

结果：

<p><b>你好</b>我想说：</p>
prependTo()

将所有匹配的元素前置到指定的元素中。

实际上，使用该方法是颠倒了常规的

$(A).prepend(B)的操作，即不是将B前置到

A中，而是将A前置到B中

HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>").prependTo("p")

结果：

<p><b>你好</b>我想说：</p>
after() 在每个匹配的元素之后插入内容

HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").after("<b>你好</b>")

结果：

<p>我想说：</p><b>你好</b>
insertAfter()

将所有匹配的元素插入到指定元素的后面。

实际上，使用该方法是颠倒了常规的

$(A).after(B)的操作，即不是将B插入到A

后面，而是将A插入到B后面

HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>").insertAfter("p")

结果：

<p>我想说：</p><b>你好</b>
before() 在每个匹配的元素之前插入内容

HTML代码：

<p>我想说：</p>

jQuery代码：

$("p").before("<b>你好</b>")

结果：

<b>你好</b><p>我想说：</p>
insertBefore()

将所有匹配的元素插入到指定的元素的前面。

实际上，使用该方法是颠倒了常规的

$(A).before(B)的操作，即不是将B插入

到A前面，而是将A插入到B前面

HTML代码：

<p>我想说：</p>

jQuery代码：

$("<b>你好</b>").insertBefore("p")

结果：

<b>你好</b><p>我想说：</p>

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

  1. jQuery插入节点的方法

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

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

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

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

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

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

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

  5. JQ 添加节点和插入节点的方法总结

    转载来源:http://blog.csdn.net/ss1106404013/article/details/49274345 添加节点的jQuery方法: append().prepend().ap ...

  6. JS中插入节点的方法appendChild和insertBefore的应用

    1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...

  7. JS(JavaScript)插入节点的方法appendChild与insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  8. jquery 插入节点

    往某个元素内部的结尾添加 append() appendTo() append() <body> <button id="bt1">点击通过jQuery的a ...

  9. jQuery元素节点的插入

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

随机推荐

  1. viewer 照片查看器

    viewer 照片查看器 效果: api: https://github.com/fengyuanchen/viewerjs#methods npm: npm install viewerjs 使用: ...

  2. 从Chrome 69.0 版本起，Flash权限受到进一步限制，默认仅在当前浏览器会话有效。

    # 69.0 之后的版本 ## 从Chrome 69.0 版本起,Flash权限受到进一步限制,默认仅在当前浏览器会话有效.关闭Enable Ephemeral Flash Permissions , ...

  3. jquery在元素中存储数据:data()

    转自:http://www.php.cn/js-tutorial-405445.html 在元素中存储数据:data() 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html& ...

  4. Datatable数据分组

    datatable里面的数据是按照这个顺序排列的 姓名    性别        年龄 a1          男           12 a1         女             11 a ...

  5. Haskell语言学习笔记（22）MaybeT

    Monad Transformers Monad 转换器用于将两个不同的Monad合成为一个Monad.Monad 转换器本身也是一个 Monad. MaybeT MaybeT 这个 Monad 转换 ...

  6. 201671010127 2016—2017—2 Java怎样解决Java程序中中文乱码的问题。

    这是本次第二次分享新手在编程中遇到的问题,相信很多Java新手和我一样,在Java编程中会遇到中文乱码的情况,下面我就给大家分享我遇到问题和解决问题的具体过程. 我先用Notepad++写了一个如下的 ...

  7. Eclipse编辑jsp不显示预览效果页面

    转载链接:https://blog.csdn.net/fishsr/article/details/22662787 转载 2014年03月31日 13:35:35 1.Eclipse打开jsp后,在 ...

  8. oracle中的分支与循环语句

    分支语句 if的三种写法一, if 2 < 1 then dbms_output.put_line('条件成立'); end if; 二, if 2 < 1 then dbms_outpu ...

  9. Spring工作原理与单例

    最近看到spring管理的bean为单例的,当它与web容器整合的时候始终搞不太清除,就网上搜索写资料, Tomcat与多线程, servlet是多线程执行的,多线程是容器提供的能力. servlet ...

  10. 72. Edit Distance (String; DP)

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...