jQuery append()、prepend()和 after() 、before() 方法向元素插入或添加内容

原创于 2016-03-18 15:42:13 发布 · 473 阅读

CC 4.0 BY-SA版权

文章标签：

3 篇文章

订阅专栏

本文介绍了jQuery中ele.append(), ele.prepend(), ele.before() 和 ele.after() 方法的使用方式及示例代码，帮助读者掌握如何利用这些方法高效地进行DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.ele.append() 方法在被选元素的结尾插入内容（加入元素内部）。

如：

<body>
<p>这是一段文本。。.</p>
<button id="btn1">追加文本</button>
</body>

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

});
</script>

输出：This is a paragraph. Appended text.

注：appendTo()同上，只是和append在选择器和内容上的位置不同：$("<b> Hello World!</b>").appendTo("p");

2.ele.prepend() 方法在被选元素的开头插入内容（加入元素内部）。用法同append();

3.ele.before() 在元素前面加入内容（不在元素内），如：

$("button").click(function(){
  $("p").after("<p>Hello world!</p>");
});

4.ele.after() 用法同上。