jQuery-初识⑥

jQuery操作文档结构

内部插入，外部插入是位置的转移

包裹是凭空往外扩充

替换是本身更改

删除匹配的元素集合中所有的子节点（相当于innerHTML==空，但不完全一样这个仍有空占位，而remove中empty是空指的是什么都没有了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #showdiv {
            width: 300px;
            height: 300px;
            border: 3px orange solid;
        }
    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        //内部插入
        function testAppend() {//append用于数据的填充（追加，展示i标签斜体特点），下拉框动态注册对应数据库内容
            //获取元素对象
            var div = $("#showdiv");
            //使用内部插入
            div.append("<i>,rice</i>");
        }

        function testAppendTo() {
            //获取元素对象
            var div = $("#showdiv");
            //使用appendTo(),将u1的内容发到#showdiv中
            $("#u1").appendTo(div);
        }
        function testPrepend() {
            //获取元素对象
            var div  = $("#showdiv");
            //使用prepend（），把要添加的内容放到前面
            div.prepend("<i>hello,</i>")
        }
        function testPrependTo() {
            var div = $("#showdiv");
            $("#u1").prependTo(div);
        }
            //外部插入
        function testAfter() {
            //获取元素对象
            var div = $("#showdiv");
            div.after("<b>hellohello,let's to study</b>");
        }
        function testBefore() {
            var div = $("#showdiv");
            div.before("<i>hi!</i>");
        }
        function testInsertAfter() {
            var div = $("#showdiv");
            $("p").insertAfter("#f00");
        }
        function testEmpty() {
            $("#showdiv").empty()
        }
    </script>
</head>
<body>
    <h3>jQuery操作元素的文档结构</h3>
    <input type="button" value="测试append" onclick="testAppend()">
    <input type="button" value="测试appendTo" onclick="testAppendTo()">
    <input type="button" value="测试prepend" onclick="testPrepend()">
    <input type="button" value="测试prependTo" onclick="testPrependTo()">
    <hr>
    <input type="button" value="测试after" onclick="testAfter()">
    <input type="button" value="测试before" onclick="testBefore()">
    <input type="button" value="测试insertAfter" onclick="testInsertAfter()">
    <input type="button" value="测试empty" onclick="testEmpty()">
    <hr>
    <u id="u1">everyday the smell of bread</u>
    <div id="showdiv">
        <b>what to eat today?</b>
    </div>
    <p>have a good day!</p>
</body>
</html>

效果：

testAppend

testAppendTo

testPrepend

testPrependTo

testAfter

testBefore

testInsertEmpty

jQuery操作文档结构

猜你喜欢