jQuery向匹配元素中插入新元素

最新推荐文章于 2023-02-11 10:52:45 发布
最新推荐文章于 2023-02-11 10:52:45 发布
阅读量838 收藏
点赞数
分类专栏： jQuery 文章标签： jquery jQuery向匹配元素中插入新元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuxingyuzzp/article/details/17419803
版权

一、方法介绍

          append        ：向每个匹配的元素增加内容。

          prepend        : 向每个匹配的元素内前置内容。

          appendTo     : 把所有匹配的元素追加到另一个指定的元素元素集合中

          prependTo    : 把所有匹配的元素前置到指定的元素的元素集合中


（1）append 实例


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
    $(function() {
        $("div.chapter p").append("<b>liuxingyu</b>");
    });
</script>
</head>
<body>
    <div class="chapter">
        <p>
            <a>百度</a>
        </p>
    </div>
</body>
</html>

firebug显示结果：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
<script type="text/javascript">
    $(function() {
       $("div.chapter p").append("liuxingyu");
    });
</script>
</head>
<body>
   <div class="chapter">
     <p>
      <a>百度</a>
       liuxingyu
      </p>
    </div>
  </body>
</html>
（2）prepend实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
    $(function() {
        $("div.chapter p").prepend("<b>liuxingyu</b>");
    });
</script>
</head>
<body>
    <div class="chapter">
        <p>
            <a>百度</a>
        </p>
    </div>
</body>
</html>

firebug显示结果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
<script type="text/javascript">
    $(function() {
       $("div.chapter p").prepend("liuxingyu");
    });
</script>
</head>
<body>
   <div class="chapter">
     <p>
      liuxingyu
      <a>百度</a>
      </p>
    </div>
  </body>
</html>
注意：append和prepend是一组append添加的内容在目标元素中的所有子元素的后面，而prepend将在目标元素内部子元素的前面。
（3） appendTo  实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
    $(function() {
        $("<b>liuxingyu</b>").appendTo("div.chapter p");
    });
</script>
</head>
<body>
    <div class="chapter">
        <p>
            <a>百度</a>
        </p>
    </div>
</body>
</html>

firebug显示结果：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
<script type="text/javascript">
   $(function() {
       $("<b>liuxingyu</b>").appendTo("div.chapter p");
    });
</script>
</head>
<body>
    <div class="chapter">
      <p>
        <a>百度</a>
        <b>liuxingyu</b>
     </p>
  </div>
</body>
</html>
（4） prependTo


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script>
<script type="text/javascript">
    $(function() {
        $("<b>liuxingyu</b>").prependTo("div.chapter p");
    });
</script>
</head>
<body>
    <div class="chapter">
        <p>
            <a>百度</a>
        </p>
    </div>
</body>
</html>

firebug显示结果：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript">
<script type="text/javascript">
   $(function() {
       $("<b>liuxingyu</b>").prependTo("div.chapter p");
    });
</script>
</head>
<body>
    <div class="chapter">
      <p>
        <b>liuxingyu</b>
        <a>百度</a>
     </p>
  </div>
</body>
</html>

注意：appendTo和prependTo是一组appendTo添加的内容在目标元素中的所有子元素的后面，而prependTo将在目标元素内部子元素的前

总结：

       注意append、prepend 和 appendTo 、prependTo 的区别，问题在于to上，append、prepend是在目标元素后内部添加内容，而 appendTo 、prependTo是将特定内容添加到目标元素的内部

         $("目标元素").append("要添加的内容")

         $("目标元素").prepend("要添加的内容")

      $("要添加的内容").appendTo("目标元素")

      $("要添加的内容").prependTo("目标元素")

                                                                                             怎一个to字了得


  

 

流星雨zzp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在每个匹配元素的外部插入新元素
流星雨
12-20 495
一、方法          wrap         ：把所有匹配的元素，用其他元素的结构化包裹起来       wrapAll      : 把所有匹配的元素，用单个元素包裹起来       wrapInner  : 把匹配元素的子类用html结构包裹起来 二、实例 （1）wrap Insert title here     $(function
jquery中关于类的操作
webeliveyou的博客
06-22 325
1.addClass()向匹配的元素添加指定的类名 addClass()方法向被选元素中添加类，如果是要添加多个类，则要在类名之间添加空格。 例如： $('.sss').addClass('jojo'); 2.removeClass()从所有匹配的元素中删除类 removeClass()方法从被选元素中删除类，如果没有规定的参数，会...
JQuery插件:用以操作匹配元素的类
chinet_bridge的专栏
11-14 599
此方法接收两个类名,她能够每次调用时更换应用每个元素的类. .this{ color:red; } .that{ color:green; } (function ($) { jQuery.fn.swapClass=function(class1,class2){ return this.each(function(){
jquery 点击后为每个匹配的元素添加指定的类名并替换src属性值
科比不来it
05-25 2748
$(document).ready(function(){ $(".jBuySmall li").on("click",function(){ tglClass( $(this) ); var aaa = $(this).attr("data-src"); //替换src的值 $(".jBuyImgBig img").attr("s
将参数内容插入到每个匹配元素（元素内部）的前面
wsxujiacheng的博客
07-13 380
将参数内容插入到每个匹配元素（元素内部）的前面使用jQuery的： .prepend( content [, content ] )方法
jQuery实现在最后一个元素之前插入新元素的方法
10-23
主要介绍了jQuery实现在最后一个元素之前插入新元素的方法,涉及jquery针对页面元素的匹配选择与属性操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
在每个匹配元素的外部插入新元素的方法
09-04
`wrap`针对每个匹配元素插入新元素，`wrapAll`将所有匹配元素一次性包裹，而`wrapInner`则是在匹配元素内部插入新元素。了解并熟练掌握这些方法，能够帮助开发者更高效地实现网页布局和内容呈现的需求。
jQuery和JavaScript节点插入元素的方法对比
11-28
在前端开发中，jQuery 和 JavaScript 都提供了丰富的API来操作DOM元素，包括插入新元素。本文将对比jQuery和JavaScript在节点插入元素时的不同方法。 首先，我们关注jQuery的方法。jQuery库简化了DOM操作，提供了...
jquery插入节点.
03-29
本文将详细讲解jQuery中的节点插入方法，帮助你更好地理解和应用这一强大的功能。 首先，我们需要理解什么是DOM（Document Object Model）。DOM是HTML和XML文档的一种结构化表示，它将网页内容组织成一棵树形结构，...
jQuery元素节点操作
lipeiwen1998的博客
07-24 205
append() append()向每个匹配的元素内部追加内容，这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似 //在div中追加了一个p标签 $("#div1").append($("<p>")); appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合中，实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中 //把标签p追加到div中 $("<p>").appendTo(
jQuery流星雨动画特效.zip
07-11
jQuery流星雨动画特效，流星雨的特效，做为网站背景或者后台登录页面的背景，效果还是很大气美观的，php中文网推荐下载！
JQuery：怎么在指定元素后面增加内容
会写Bug的攻城狮
02-11 4274
JQuery：怎么在指定元素后面增加内容
jQuery实现在元素的不同位置插入元素（内部插入和外部插入）
ztnhnr的专栏
07-05 1万+
在html页面中，我们可以使用 jquery 将新增的元素添加到指定元素的指定位置。这个位置可以在元素的内部和外部，而对于内外位置，又可以在元素的前面和后面。 一、内部插入 1.1 append() append()方法可以在 目标元素内部 的 尾部 插入元素，插入的元素作为最后一个子元素。举例如下： <!doctypehtml> <html> <head> <title>元素插入</t...
jquery追加元素的方法
闲笔杂叙
12-16 2618
//操作范围元素的内部 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容//操作范围元素的外部 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 以上几个元素说明 作用范围/位置 元素外部 元素内部 被选元素前 被选元素后 append() false true false
jQuery阶段复习1-2
moonie172的博客
09-14 102
一、jQuery节点操作 1.jQuery简介 jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 2.jQuery 节点操作 1.DOM节点获取 $('#test').parent(); //获取父节点 $('#test').parents();//获取全部父节点，一路向上直到文档的根元素 (<html>) $(‘#test').children(
jQuery练习题及答案
热门推荐
weixin_40693633的博客
07-03 8万+
一．选择题1. 下面哪种不是jquery的选择器?(  )  C。A、基本选择器                          B、层次选择器C、css选择器                                   D、表单选择器2. 当DOM加载完成后要执行的函数，下面哪个是正确的?(  )  CA、jQuery(expression, [context])  B、jQuery...
jquery --- 在元素之前/之后插入某个元素
Cg_Companion_Xi的博客
05-17 7992
以下面代码为例： <div class="warpper"> <span>天气很凉快</span> <p>我是1</p> <span class="box">我是box</span> <p>我在2下面</p> <span>我是3</span> </div> <script>
JQuery 模糊匹配（JQuery 选择器模糊匹配、选择指定属性是以给定字符串开始的元素 ）
u013913942的博客
06-01 2万+
我们在使用 JQuery 的时候，有时需要选择多个属性以指定字符串开头或者包含某些字符串的时候。比如，我们一个页面中，所有的被罚款人的 input 输入框的 id 或者 name命名规则如下：都以 beFineMan 开头，然后后面依次加上不同的数字，例如这样那么，选择所有的被罚款人输入框中的...
jQueryDOM节点操作
weixin_44886816的博客
04-30 126
知识点： 1、jQuery中节点的创建 语法：()函数处理，()函数处理，()函数处理，(“html结构”) jQuery创建的节点是一个jQuery对象 2、jQuery节点的插入 向元素内部插入DOM节点  append() 向每个匹配的元素内部追加内容  appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合中。  prepend() 向每个匹配的元素内部前置内容  ...
jquery 在父元素第一个位置插入新元素
最新发布
05-28
可以使用 jQuery 的 `prepend()` 方法在父元素的第一个位置插入新元素。示例代码如下： ```javascript // 假设父元素的 id 为 parent，新元素为 <div>hello world $('#parent').prepend('<div>hello world</div>');...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值