方法 描述 示例
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. jQuery id模糊 选择器 批量处理

    $("span[id^='province_']").each(function(index,obj){        $(obj).bind("click", ...

  2. 2.vo传参模式和ModerDriven传参模式

    转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html Copy上面的myStruts2项目,改名为myStruts2Vo项目.作如 ...

  3. 使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据

    <div class="bus-nav-bar ft12"> <div class="navt bor-r-c pos-rel {if $int == ...

  4. fb 发布桌面应用图标

    1.以src文件夹为根目录,即图标放在src文件内 2.修改app.xml文件icon,按尺寸填入,如下图 同时可修改app应用的名字,接受中文,如下图红色涂鸦: 导出发行版的时候,注意打包内容有么有 ...

  5. WINFORM小列子参考

    1.用树型列表动态显示菜单   密码:zx9t 二.Popup窗口提醒(桌面右下角出现)   密码:cjjo 三.台历 密码:nq4m 四.文件复制  密码:lsqj 五.进度条  密码:byti 六 ...

  6. this指针的调整

    我们先来看一段代码: #include <iostream> using namespace std; class A { public: int a; A( ) { printf(&qu ...

  7. 【转】.net 实现 语音搜索(仅限WebKit内核浏览器)

    <input type="text" class="text" name="value_2" id="value_2&quo ...

  8. JAVA NIO学习记录1-buffer和channel

    什么是NIO? Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的Java IO API.NIO与原来的IO有同样的作用和目的,但是使用的方式完全不 ...

  9. Nagios自定义扩展

    原理:监控端通过check_nrpe把要监控的指令发送给被监控端,被监控端在本机执行监控任务,并把执行的结果发送回监控端. 如何扩展Nagios,以实现自定义监控? 借助插件进行的每一次有效的Nagi ...

  10. UGUI双击事件

    经测试在Android.ios平台下无效 using UnityEngine; using UnityEngine.EventSystems; using System.Collections; us ...