方法 描述 示例
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. JavaScript判断浏览器及其版本信息

    通过window.navigator来判断: function getBrowserInfo(){ var Info = {}; var str = window.navigator.userAgen ...

  2. jsp 调用其他jsp页面 跳转

    response.sendRedirect("test2.jsp"); window.location.reload("test2.jsp"); locatio ...

  3. 机器学习入门-贝叶斯统计语料库的词频.groupby() collections

    1..groupby()[].agg(by={}) 2. collections.de...(lambda:1) 统计的单词是语料库中所有的词, 对Dataframe统计单词词频,同时增加一列数据co ...

  4. git-采集编码搜索

    https://github.com/search?utf8=%E2%9C%93&q=%E9%87%87%E9%9B%86%E7%BC%96%E7%A0%81&type= https: ...

  5. iOS toll-free bridge

    https://developer.apple.com/library/ios/documentation/CoreFoundation/Conceptual/CFDesignConcepts/Art ...

  6. Linux系统之更改默认块大小

    查看操作系统块大小:#tune2fs  -l /dev/sda1 |grep 'Block size'               ( tune2fs  -l  /dev/sda1可以查看更多相关文件 ...

  7. 安装oracle后java -version命令显示 jdk version "1.3.1"的原因

    因为先装的JDK,后装了oracle,oracle的JDK配置把原来的jdk路径替换掉了. 我的电脑->属性->高级->环境变量->系统变量->PATH ,把JDK的路径 ...

  8. java多线程实例(2)

    public class ThreadDemo05 { public static void main(String args[]) { // 四个售票点应该控制同一个资源 Demo d = new ...

  9. 代码重构:用工厂+策略模式优化过多的if else代码块

    最近在工作中优化了一段冗余的if else代码块,感觉对设计模式的理解和运用很有帮助,所以分享出来.鉴于原代码会涉及到公司的隐私,因此就不贴出来了.下面以更加通俗易懂的案例来解析. 假如写一个针对员工 ...

  10. websoket

    http://blog.csdn.net/xueling022/article/details/52902358