JQuery增删改查 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/jQuery3.3.1.js"></script>
    <script type="text/javascript" src="./js/jquery-color.js"></script>
</head>
<body>
<div >
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<script type="text/javascript">

//创建元素  $("<ul></ul>")
    $(function () {
        let text = "xiaohua";
        // $("ul").append($(`<li>${text}</li>`))  //后置追加
        // $(`<li>${text}</li>`).appendTo("ul")  //子追加到父元素成为最后一个子元素

        // $("ul").prepend($(`<li>${text}</li>`))  // 前置追加
        // $(`<li>${text}</li>`).prependTo("ul")   //子追加到父元素成为第一个子元素

        // $("li:eq(1)").after($(`<li>${text}</li>`))  //兄弟元素后面追加
        // $(`<li>${text}</li>`).insertAfter($("li:eq(1)"))

        // $("li").before($(`<li>${text}</li>`))   //兄弟元素前面追加
            $(`<li>${text}</li>`).insertBefore($("li:eq(1)"))

        
        // $("ul").remove()    //移除自己, 连同事件一起清除
        // $("ul").detach()   //移除标签,  不移除事件,  可以继续调用
        // $("ul").empty()   // 清空ul标签内的所有元素
        // $("ul").text("");//清空
        // $("ul").html("");//清空
        // $("ul").val("");  //针对 input , button .等
    })
</script>
</body>
</html>

 

posted @ 2018-11-14 16:39  python传言  阅读(822)  评论(0)    收藏  举报