16添加元素

<head>
    <meta charset="UTF-8">
    <title>17添加元素</title>
</head>
<body>
        <div id="no1">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <hr>
        <div id="btn">
            <input type="button" value="父元素末尾">
            <input type="button" value="父元素开头">
            <input type="button" value="指定元素后">
            <input type="button" value="指定元素前">
        </div>

</body>
        <script src="js/jquery-1.8.3.js"></script>
        <script>

            $("#btn :button:eq(0)").on("click",function () {
                var $newdiv = $("<div><div>");
                $newdiv.html("*");
                $("#no1").append($newdiv);
            })
            $("#btn :button:eq(1)").on("click",function () {
                var $newdiv = $("<div><div>");
                $newdiv.html("#");
                $("#no1").prepend($newdiv);
            })
            $("#btn :button:eq(2)").on("click",function () {
                var $newdiv = $("<div><div>");
                $newdiv.html("#");
                $("#no1 div:eq(1)").after($newdiv);
            })
            $("#btn :button:eq(3)").on("click",function () {
                var $newdiv = $("<div><div>");
                $newdiv.html("#");
                $("#no1 div:eq(1)").before($newdiv);
            })

        </script>
posted on 2022-04-18 22:55 小小程序猿level1 阅读(28) 评论(0) 收藏举报