摘要：它的作用是是用來處理等操作方法的參數(shù)的，統(tǒng)一將其處理為類型節(jié)點，并交由函數(shù)處理，即上圖的。作用將返回的插入到的內(nèi)部末尾。方法創(chuàng)建了一虛擬的節(jié)點對象，節(jié)點對象包含所有屬性和方法。

前言：這篇我們倒著講

1、有這樣一個頁面：

  append操作

  






<del id="ygica"></del>
<ul id="ygica"><sup id="ygica"></sup></ul>
<ul id="ygica"><dfn id="ygica"></dfn></ul>
<tfoot id="ygica"></tfoot>
<strike id="ygica"><input id="ygica"></input></strike>

注意：不要 append(test1)，規(guī)范寫法是 append(test1)

2、像之前的文章一樣，我們自定義 append() 方法

  let ajQuery={}
  jQuery.each({
      //例:"
Test
"
      //源碼6011行-6019行
      // 在被選元素的結(jié)尾插入指定內(nèi)容
      /*append的內(nèi)部的原理，就是通過創(chuàng)建一個文檔碎片，把新增的節(jié)點放到文檔碎片中，通過文檔碎片克隆到到頁面上去，目的是效率更高*/
      append: function(nodelist, arguments) {
        //node是由domManip處理得到的文檔碎片documentFragment，里面包含要插入的DOM節(jié)點
        let callbackOne=function( node ) {
          console.log(node,"node149")
          //this指的就是$("xxx")
          //1:元素節(jié)點,11:DocumentFragment,9:document
          if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            //table插入tr的額外判斷
            //target默認(rèn)情況是selector，即document.querySelectorAll(".inner")
            let target = manipulationTarget( this, node )
            console.log(target,node.childNodes,"node147")
            //append的本質(zhì)即使用原生appendChild方法在被選元素內(nèi)部的結(jié)尾插入指定內(nèi)容
            target.appendChild( node );
          }
        }

        console.log(nodelist,arguments,"this120")
        return domManip( nodelist, arguments, callbackOne );
      },

    },

    function(key, value) {
      ajQuery[key] = function(nodelist, arguments) {
        console.log(nodelist,"nodelist128")
          return  value(nodelist, arguments);
        }
      }
    )

3、可以看到，append() 內(nèi)部調(diào)用了 domManip 的方法，接下來重點介紹下該方法

（1）什么是 domManip ？

domManip() 是 jQuery DOM 的核心函數(shù)。dom 即 Dom 元素，Manip 是Manipulate 的縮寫，連在一起就是 Dom 操作的意思。

（2）它的作用是？

domManip() 是用來處理 $().append(xxx)、$().after(xxx) 等操作 DOM 方法的參數(shù)的，統(tǒng)一將其處理為 DOM 類型節(jié)點，并交由 callback 函數(shù)處理，即上圖的 callbackOne。

注意： 本文暫不考慮參數(shù)包含