jQuery--文档元素的插入与替换

最新推荐文章于 2022-06-01 15:34:23 发布

人生如初见_张默

最新推荐文章于 2022-06-01 15:34:23 发布

阅读量327

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_42176520/article/details/103598126

版权

jQuery 专栏收录该内容

98 篇文章 1 订阅

订阅专栏

本文深入讲解了使用jQuery库操作DOM的五种核心方法：append(), after(), prepend(), before() 和 replaceWith()。通过实例演示了如何在网页元素内部或周围添加、插入及替换HTML内容，为读者提供了丰富的代码示例和应用场景。

摘要由CSDN通过智能技术生成

<script>
    $(document).ready(function() {
        $('#site').bind('click',function() {
            //1、append()：将新元素添加到当前的jQuery对象中
            $(this).append('html');//html添加到了h3标签里面
            //2、after()：将新元素添加到当前对象的后面
            $(this).after('<p style='color:red'>免费</p>');//添加到h3标签后面同级
            //3、prepend()：将新元素添加到当前元素的前面，它还在当前元素中
            $(this).prepend('<a href="http://xxxx.com">点击</a>');//添加到h3里面
            //4、before()：将新元素添加到当前元素的前面
            $(this).before('<h2>欢迎</h2>');//添加到h3前面同级
            //5、replaceWith()：替换当前元素
            $(this).replaceWith('<h1>'+$(this).text()+'</h1>');
            $(this).replaceWith(function() {
                return '<h2>学习</h2>';
            });
        });
    });
</script>
<body>
    <h3>php</h3>
</body>