jQuery append() 方法与 after() 方法

古城微笑少年丶 2022-09-26 03:14 188阅读 0赞

定义和用法

after() 方法在被选元素后插入指定的内容，append() 方法在被选元素的结尾插入指定内容。

代码示例 一

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").after("<p>Hello world!</p>");
      });
    });
    </script>
    </head>
    <body>
    
    <button>在每个P元素后插入内容</button>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    
    </body>
    </html>

代码示例 二

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    	$("#btn1").click(function(){
    		$("p").append(" <b>插入文本</b>.");
    	});
    	$("#btn2").click(function(){
    		$("ol").append("<li>插入项</li>");
    	});
    });
    </script>
    </head>
    <body>
    
    <p>这是一个段落。</p>
    <p>这是另一个段落</p>
    <ol>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    </ol>
    <button id="btn1">插入文本</button>
    <button id="btn2">插入列表项</button>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery插入内容 prepend、append、after、before

迎大家一起交流学习n(\*≧▽≦\*)n prepend：在元素开头插入内容 append：在元素结尾插入内容 after：在元素之后插入内容 before：在元...

水深无声/ 2024年04月18日 18:34/ 0 赞/ 66 阅读

相关 java prepend和append_Jquery添加元素（append，prepend，after，before四种方法区别对比）...

jquery是一个平常比较喜欢用的js框架，因为上手比较简单吧，哈哈，下面呢，就介绍一下Jquery中如何添加元素。jquery添加元素一共有四个语句，分别是append()，

蔚落/ 2022年11月09日 14:17/ 0 赞/ 216 阅读

相关 jQuery append() 方法与 after() 方法

定义和用法 after() 方法在被选元素后插入指定的内容，append() 方法在被选元素的结尾插入指定内容。代码示例一 <!DOCTYPE html

古城微笑少年丶/ 2022年09月26日 03:14/ 0 赞/ 189 阅读

相关 jquery after(),append()方法

jQuery after() 方法 after() 方法在被选元素后插入指定的内容。提示：如需在被选元素前插入内容，请使用 [ before()][before] 方

左手的ㄟ右手/ 2022年08月22日 06:16/ 0 赞/ 166 阅读

相关 JQuery 修改元素 html() append() after() 区别

`html()`：返回或设置被选元素的内容。 `append()`：在被选元素的结尾（仍然在内部）插入指定内容。 `after()`：被选元素后插入指定的内容

「爱情、让人受尽委屈。」/ 2022年08月09日 12:42/ 0 赞/ 189 阅读

相关 jquery after append appendTo三个函数的区别

1、after函数定义和用法： after() 方法在被选元素后插入指定的内容。语法： $(selector).after(content)

今天药忘吃喽~/ 2022年07月29日 08:54/ 0 赞/ 223 阅读

相关 jquery append 和after 的区别

jquery append 和after 的区别 [牛牛最美伋][Link 1] | 浏览 2262 次 |[举报][Link 2] 我有更好的答案

朱雀/ 2022年06月01日 00:49/ 0 赞/ 202 阅读

相关 jquery append和after, prepend和before的区别

1. append()和prepend() 假设 <div class='a'> //<---you want div c to append in thi

谁借莪１个温暖的怀抱￠/ 2022年05月23日 12:44/ 0 赞/ 178 阅读

相关 Jquery添加元素（append，prepend，after，before四种方法区别对比）

append() & prepend()是在元素内插入内容（该内容变成该元素的子元素或节点），after() & before()是在元素的外面插入内容（其内容变成元素的兄弟节

超、凢脫俗/ 2022年04月02日 19:00/ 0 赞/ 214 阅读

相关 jquery追加元素的几种方法append()、prepend()、after()、before()、insertAfter()、insertBefore()

最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。 <!DOCTYPE html> <html> <head> <meta

比眉伴天荒/ 2021年06月26日 16:06/ 0 赞/ 567 阅读