jquery文檔操作

js的DOM操作,也就是所謂的增删改查DOM操作。通過js的DOM的操作，大家也能發現，大量的繁瑣代碼實作我們想要的效果。那麼jQuery的文檔操作的API提供了便利的方法供我們操作我們的文檔。

看一個之前我們js操作DOM的例子：

$(function () {
    var ul0 = document.getElementsByTagName('ul')[0]; //第一個ul
    var newli = document.createElement('li'); //li對象建立
    // newli.innerHTML = '<a>小馬過河</a>'; //建立的li添加内容  引号添加文本，反引号添加html。
    newli.innerHTML = `<a href="#">小馬過河</a>`; //建立的li添加内容
    ul0.appendChild(newli);  //li對象追加到ul的最後
})

一.插入操作

知識點1：

文法：

父元素.append(子元素)

解釋：追加某元素，在父元素中添加新的子元素。子元素可以為：stirng | element（js對象） | jquery元素

代碼：

jquery文檔操作

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
    </style>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
         <script type="text/javascript">
            $(function () {
                var newli=document.createElement('li');
                newli.innerText='魔降風雲變'
                $('ul :eq(0)').append('<li>小馬過河</li>')//父中添加子，子可以是string
                $('ul :eq(0)').append(newli) //子可以是js對象
                $('ul :eq(0)').append($('.active'))//子可以是jq對象，結果是移動位置了。移動标簽位置
        })
    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    ------------------
    <ul>
        <li class="active"> ul2的一 </li>
        <li>ul2的二</li>
    </ul>
</body>
</html>

View Code

<li>小馬過河</li>不是string，糾正一下。父追加子，子可以字元串，引起來的标簽，DOM對象，jq對象

PS:如果追加的是jquery對象那麼這些元素将從原位置上消失。簡言之，就是一個移動操作。

似乎追加到第一個子标簽後面了，難道不是追加到最後麼？開頭添加一個元素，結果還是第一個追加是在開頭元素的後面，後面的追加到上一個追加的後面

其實是這樣的：

指定索引的标簽追加子元素，将子元素在第一個子元素内添加，這樣的話，都是行内就一行顯示，第一個子元素中有塊級的就換行顯示

不用指定索引的追加子元素才是正常的追加。

知識點2：

子元素.appendTo(父元素)

解釋：追加到某元素子元素添加到父元素

$(function () {
            $('<li>使用選擇器追加，是從父的最後一個追加，且與索引追加沒沖突</li>').appendTo($('.ul1'))
            $('<li>使用索引添加，從第一行後面開始追加</li>').appendTo($('ul :eq(0)'))
        })

$('<li>小馬過河</li>').appendTo($('ul :eq(0)')) //子追加到父，

PS:要添加的元素同樣既可以是stirng 、element(js對象) 、 jquery元素

知識點3：

父元素.prepend(子元素)；

解釋：前置添加，添加到父元素的第一個位置

$('ul').prepend('<li>我是第一個</li>')

父前置加子，這裡父是第一個ul，li裡文字和這裡的文字都是行内所有一行顯示，‘’是誰 ‘’ 在前

父使用索引 prepend放法，不是想象的那樣

沒有索引，prepend, 前置追加一個子

知識點4：

子元素.prependTo(父元素)；

$('<a href="#">mmm</a>').prependTo($('.ul1'))

知識點5：

兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.inserAfter(兄弟元素)；

解釋：在比對的元素之後插入内容

$('.ul1 li').after('mcw')  
 $('<li>小馬過河</li>').insertAfter('.ul2 li')

元素對象.的後面加内容；$()對象點插入在元素選擇器後 (非對象)

知識點6：

兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.inserBefore(兄弟元素)；

$('.ul1 li').before('我是一個粉刷匠')
$('<h5>我是一個h5标題</h5>').insertBefore('.ul2 li')

元素對象.的前面加内容；内容對象.插入前面在選擇器選中的（非對象）