jQuery的DOM操作之添加元素和删除元素

最新推荐文章于 2024-09-07 15:36:00 发布

bboyjoe

最新推荐文章于 2024-09-07 15:36:00 发布

阅读量3.9k

点赞数

分类专栏： jQuery 文章标签：前端 jquery dom

本文链接：https://blog.csdn.net/bboyjoe/article/details/47400135

版权

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

添加元素：

.append()——在目标元素之后添加元素；

.prepend()——在目标元素之前添加元素；

.after()——在目标元素之后换行添加元素；

.before()——在目标元素之前添加元素，并使目标元素换行；

删除元素：

.remove()——删除目标元素；

.empty()——清空目标元素内的子元素；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>添加元素&删除元素</title>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/addEle.js"></script>
    <style>
        .divStyle{
            width:300px;
            height:25px;
            background: #01C5FF;
        }
    </style>
</head>
<body>
<button id="btn">添加元素</button>
<div class="divStyle">
    <p>恒大今年的亚冠之路会顺利吗？</p>
</div>
<button id="btn2">删除元素</button>

</body>
</html>

$(document).ready(function(){
    /*添加元素*/
    $("#btn").on("click",function(){
        /**
         *html方法,jQuery方法,Dom方法
         */
        var ele1="<p>come on</p>";
        var ele2=$("<p></p>").text("let's do it");
        var ele3=document.createElement("p");
        ele3.innerHTML="dance your body";
        $("body").append(ele1,ele2,ele3);
    });
    /*删除元素*/
    $("#btn2").on("click",function(){
        //$("div").remove();
        $("div").empty();
    });
});