方法 描述 示例
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. CENTOS系统安装及初始化配置相关

    一,配置网卡: 1,设置网卡ip地址:vi   /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0TYPE=EthernetONBOOT=yes ...

  2. springboot ssl http转Https

    参考:https://www.cnblogs.com/imfjj/p/9058443.html   (里面有坑) https://blog.csdn.net/l4642247/article/deta ...

  3. 高性能JSON框架之FastJson的简单使用

    1.前言 1.1.FastJson的介绍: JSON协议使用方便,越来越流行,JSON的处理器有很多,这里我介绍一下FastJson,FastJson是阿里的开源框架,被不少企业使用,是一个极其优秀的 ...

  4. Spring Boot实践——用外部配置填充Bean属性的几种方法

    引用:https://blog.csdn.net/qq_17586821/article/details/79802320 spring boot允许我们把配置信息外部化.由此,我们就可以在不同的环境 ...

  5. Error 2503 and 2502 when installing/uninstalling on Windows 10

    1. Hold Ctrl+Shift and press Esc. 2. Locate “Windows Explorer” under “Windows processes”, now right ...

  6. DrawDib 使用例子<转>

    #include<vfw.h>#pragma comment(lib,"Vfw32.lib") BITMAPINFOHEADER biHeader; memset(&a ...

  7. spring cloud： eureka搭建

    1. 添加pom 依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  8. Haskell语言学习笔记（57）Parsec（4）

    Parser 类型 data ParsecT s u m a type Parsec s u = ParsecT s u Identity type Parser = Parsec String () ...

  9. 迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信

    avalon的ViewModel对象从其内部EventManager里继承了三个方法,$watch.$unwatch.$fire三个方法,它们就是我们本节的主题. 词如其名,非常直白,一看就知道做什么 ...

  10. js函数中变量声明提前

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