jQuery DOM插入节点操作指南

jQuery 2018-12-31

方法内部追加内容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页面搜索关键词突出显示
页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印
jQuery 添加水印 <script src="../../../.....
Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
中文：Sys.WebForms.PageRequestManagerParserErrorExceptio...
Asp.net 后台调用js方法
1. 用Response.Write方法 代码如下： Response.Write(&q...
Jquery实现按钮点击遮罩加载，处理完后恢复
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按...