jQuery DOM插入节点操作指南

方法内部追加内容 HTML代码：

我想说:

jQuery代码：

$("p").append("你好");

结果：

我想说:你好

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

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

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

HTML代码：我想说:

代码：

$("你好").appendTo("p")

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">结果：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">

我想说:你好

内部前置内容normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">HTML代码：

我想说:

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">jQuery代码：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">$("p").prepend("你好")

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">结果：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">

你好我想说：

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

。实际上，使用该方法是颠倒了

常规$(A).prepend(B)操作。

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">HTML代码：

我想说:

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">jQuery代码：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">$("你好").prependTo("p")

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">结果：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">你好我想说：

内容normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">HTML代码：

我想说:

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">jQuery代码：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">$("p").after("你好")

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">结果：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">

我想说：

你好

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

素的后面，实际上，使用该方法

是颠倒了常规的$(A).after(B)操作

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">HTML代码：

我想说:

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">jQuery代码：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">$("你好").insertAfter("p")

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">结果：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">我想说：

你好

内容normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">HTML代码：

我想说:

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">jQuery代码：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">$("p").before("你好")

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">结果：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">你好

我想说：

将所以匹配的元素插入到指

定的元素的前面。实际上，

使用该方法是颠倒了常规

的$(A).before(B)的操作。

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">HTML代码：

我想说:

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">jQuery代码：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">$("你好").insertBefore("p")

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">结果：

normal; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; line-height: 22px; padding-right: 0px">你好

我想说：

以上就是本文的全部内容了，希望大家能够喜欢。

jQuery 插入节点

上一篇：Jquery实现地铁线路指示灯提示牌效下一篇：jQuery对象与DOM对象之间的相互转换

相关推荐

jquery页面搜索关键词突出显示

页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(".list_r").find('span').css({ // 每次搜索开始，先把所有字体颜色恢复初始状态 'color': "#838792"

作者：今♀妃惜彼时间：2024-09-23

jQuery实时显示日期、时间

jQuery实时显示日期、时间 html: <span id="time"></span> js: <script src="Js/jquery.min.js"></script> <%--引用jQuery

作者：今♀妃惜彼时间：2024-09-23

jQuery 添加水印

jQuery 添加水印 <script src="../../../../AJs/jquery.min.js"></script> <script type="text/javascript"> $(document).re

作者：今♀妃惜彼时间：2024-09-23

Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息

中文：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息，之所以出现此错误，常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪。详细信息：分析附近的“输

作者：今♀妃惜彼时间：2024-09-23

Asp.net 后台调用js方法

1. 用Response.Write方法代码如下： Response.Write("<script type='text/javascript'>alert("XXX");</script>"); 此方只能调用内部函数

作者：今♀妃惜彼时间：2024-09-23

Jquery实现按钮点击遮罩加载，处理完后恢复

Jquery实现按钮点击遮罩加载，处理完后恢复思路： 1.点击按钮调用OnClientClick事件，添加dom元素及样式。 2.当Click中逻辑执行完后，在Click中调用js方法删除掉刚才添加的dom元素。 1 <%@ Page Language="C#" Auto

作者：今♀妃惜彼时间：2024-09-23

.Net后台调用js，提示、打开新窗体、关闭当前窗体

.Net后台调用js，提示、关闭当前窗体、打开新窗体 Response.Write("<script>window.alert('支付成功!');window.open('/JkCommerce/" + href + "',&

作者：今♀妃惜彼时间：2024-09-23

.net 搜索联想词

思路： 1.ajax请求后台方法获取数据。 2.通过jquery将请求到的数据显示在页面上。前台 <div class="sc_con" id="bbsearch"> <input type="text" class=&

作者：今♀妃惜彼时间：2024-09-23

JS点击子元素不触发父元素点击事件(js阻止冒泡)

<html> <title></title> <head> <meta charset="utf-8"> <style type="text/css"> .divone{width:100

作者：今♀妃惜彼时间：2024-09-23

jQuery表单验证提交：前台验证一

jQuery表单验证提交：前台验证一（图文+视频）

作者：编程之家时间：2023-09-13

小编推荐

苹果市值2025年有望达4万亿美元