jquery-development
/
jQuery创建和插入对象.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="city">
        <li class="tianjin">99</li>
        <li class="jiujinshan">jiujinshan</li>
    </ul>
    <ul>
        <li class="fk"> 反恐</li>
        <li>33</li>
    </ul>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>
        //         append(element)  添加成最后一个子元素，两者之间是父子关系
        // prepend(element)    添加成第一个子元素，两者之间是父子关系
        // $("<A id "11>aaaa</A>") 创建A元素对象,同时可以给对象添加属性和标签体
        // before(element)  添加到当前元素的前面，两者之间是兄弟关系
        // after(element)  添加到当前元素的后面，两者之间是兄弟关系
        // insertBefore(element) 把元素添加到另外一个元素前面,两者之间是兄弟关系
        // insertAfter(element) 把元素添加到另外一个元素后面,两者之间是兄弟关系
        // remove()   删除
        var $city = $("#city")
        var $fk = $(".fk")
        $city.append($fk)
        $city.prepend($fk)

        var $ms = $("<a id='ms' >aaaa</a>")
        $(".tianjin").before($ms)
        $(".tianjin").after($ms)


        $ms.insertBefore($city)  //把元素添加到另外一个元素前面,两者之间是兄弟关系

        $(".jiujinshan").remove() //删除
        $city.empty() //清空子元素
    </script>
</body>

</html>