jQuery的DOM操作（三）

来源：互联网发布：网络架构工程师编辑：程序博客网时间：2024/06/05 09:31

                **jQuery的DOM操作（三、节点的插入）**

今天写得这个篇幅有点长，但是看完后你绝对受益匪浅，讲述的是插入节点的几种方法。想学习，切忌一定要有耐心多看看下去。这些都是一些很基础多部分，高手可以忽略或者跳过。也欢迎各位好朋友吐槽。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jQuery中的DOM操作（三）</title>    <link rel="stylesheet" type="text/css" href="style.css">    <script type="text/javascript" src="../jquery-1.9.1.js"></script>    <style type="text/css">    body{margin: 0;padding: 0;}    .content{width: 1000px;overflow: hidden;margin: 30px auto;position: relative;}    </style></head><body>    <div class="content">        <h1>jQuery中的DOM操作（三）</h1>        <div class="part1">            <h2>插入节点</h2>            <p>                <b>内部的前后插入节点</b>                <span>1.append()</span>                    <pre>                        eg:                        <p>我想说：</p>                        jq:                        $("p").append("<b>你好</b>");                        结果是：                        <p>我想说：<b>你好</b></p>                    </pre>                <span>2.appendTo()</span>                    <pre>                        eg:                        <p>我想说：</p>                        jq:                        $("<b>你好</b>").appendTo("p");                        结果是：                        <p>我想说：<b>你好</b></p>                    </pre>                注释：从上面可以看出 1,2他们的结果是一样的，只是插入的对象顺序是不一样的                <span>3.prepend()</span>                    <pre>                        eg:                        <p>我想说：</p>                        jq:                        $("p").prepend("<b>你好</b>");                        结果是：                        <p><b>你好</b>我想说：</p>                    </pre>                  <span>4.prependTo()</span>                    <pre>                        eg:                        <p>我想说：</p>                        jq:                        $("<b>你好</b>").prependTo("p");                        结果是：                        <p><b>你好</b>我想说：</p>                    </pre>                注释：从上面可以看出 3,4他们的结果是一样的，只是插入的对象顺序是不一样的                     而1，2和3，4的区别是 被插入对象都是内部插入但是一个在后插入节点而另一个则是在前插入节点。            </p>             <hr>            <p>                <b>外部的前后插入节点</b>                <span>1.after()</span>                    <pre>                        eg:                        <p>我想说：</p>                        jq:                        $("p").after("<b>你好</b>");                        结果是：                        <p>我想说：</p><b>你好</b>                    </pre>                <span>2.insertAfter()</span>                    <pre>                        eg:                        <p>我想说：</p>                        jq:                        $("<b>你好</b>").insertAfter("p");                        结果是：                        <p>我想说：</p><b>你好</b>                    </pre>                注释：从上面可以看出 1,2他们的结果是一样的，只是插入的对象顺序是不一样的                <span>3.before()</span>                    <pre>                        eg:                        <p>我想说：</p>                        jq:                        $("p").prepend("<b>你好</b>");                        结果是：                        <b>你好</b><p>我想说：</p>                    </pre>                  <span>4.insertBefore()</span>                    <pre>                        eg:                        <p>我想说：</p>                        jq:                        $("<b>你好</b>").insertBefore("p");                        结果是：                        <b>你好</b><p>我想说：</p>                    </pre>                注释：从上面可以看出 3,4他们的结果是一样的，只是插入的对象顺序是不一样的                     而1，2和3，4的区别是 被插入对象都是外部插入但是一个在后插入节点而另一个则是在前插入节点。            </p>              <div>                小结：                    从插入节点方式可分为：内部插入节点和外部插入节点两种                    但是                    （内部）插入节点又分为内部的前后两种插入节点的方法,分别是：                        内部前插入节点：prepend()和prependTo() 结果一样，采用的格式不同                        内部后插入节点：append()和appendTo()   结果一样，采用的格式不同                    （外部）插入节点又分为外部的前后两种插入节点的方法，分别是：                        外部前插入节点：before()和insertBefore()结果一样，采用的格式不同                        外部后插入节点：after()和insertAfter()  结果一样，采用的格式不同                理论咱们就讲到这了，虽然有点绕，但是只要缕清了还是非常容易去记忆的。            </div>         </div> </body></html>

0 0