[JQuery 学习笔记] 插入/替换元素 (append, after, prepend, before)

最新推荐文章于 2024-12-23 23:11:47 发布

尉迟海棠

最新推荐文章于 2024-12-23 23:11:47 发布

阅读量1.1k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/GYK0812/article/details/108419876

版权

jQuery 专栏收录该内容

10 篇文章

订阅专栏

这篇博客详细介绍了如何使用JQuery进行元素插入和替换操作，包括append()、after()、prepend()和before()四个方法。通过实例演示了这些方法如何在HTML元素中添加新内容，例如将'www.php.cn'添加到id为SiteName的h3元素的前后位置。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-1插入与替换</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

</head>
<body>
    <h3 id="SiteName">PHP中文网</h3>
</body>
</html>

上面的html文件中只有一个元素 h3，对应的 id = SiteName

1. 将新元素添加到当前JQuery对象中， append()

<script>
        $(function(){
           $("#SiteName").click(function(){
               $(this).append("www.php.cn")
           }) 
        })
    </script>

执行之后，会将www.php.cn 添加到h3对象的后面。

2. 将新元素添加到当前对象的后面， after()

// 将新元素添加到当前jquery对象的后面
$(this).after('<h4>www.php.cn</h4>')

3. 将新元素添加到当前元素的前面，但仍在当前元素中 prpend()

// 将新元素添加到当前对象前面，但是还在这个元素中
$(this).prepend('<a href="http://www.php.cn">点击访问</a>')

4. 将元素添加到当前对象的前面 before()

// 将新元素添加到当前元素的前面， before()
$(this).before("<h2>欢迎来到:</h2>")