久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

Node 對(duì)象提供了一些用于向 HTML 頁(yè)面插入節(jié)點(diǎn)的方法，通過(guò)這些方法我們可以實(shí)現(xiàn)向 HTML 頁(yè)面新增元素，或者移動(dòng) HTML 頁(yè)面中的元素。 ## appendChild() 方法 Node 對(duì)象提供的 appendChild() 方法可以向指定節(jié)點(diǎn)的子節(jié)點(diǎn)列表的最后添加一個(gè)新的子節(jié)點(diǎn)。其語(yǔ)法結(jié)構(gòu)如下: ```javascript var child = node.appendChild(child); ``` 在上述語(yǔ)法結(jié)構(gòu)中，appendChild() 方法的參數(shù) child 表示添加的新的子節(jié)點(diǎn)，同時(shí)該子節(jié)點(diǎn)也是 appendChild() 方法的返回值。 我們可以通過(guò)如下代碼示例，學(xué)習(xí) appendChild() 方法的使用: ```javascript var parent = document.getElementById('parent'); var button = document.createElement('button'); button.setAttribute('class','button'); var text = document.createTextNode('A New Button'); button.appendChild(text); // 將新節(jié)點(diǎn)添加到父節(jié)點(diǎn)中 parent.appendChild(button); ``` 在上述代碼示例中，我們創(chuàng)建了一個(gè)新的 `<button>` 元素，并且將這個(gè) `<button>` 元素添加到指定節(jié)點(diǎn)的子節(jié)點(diǎn)列表的最后面。 > **值得注意的是:** 如果我們是將 HTML 頁(yè)面中原有的節(jié)點(diǎn)插入到指定節(jié)點(diǎn)的子節(jié)點(diǎn)列表的最后面，那這個(gè)被插入的節(jié)點(diǎn)會(huì)先從原有的位置移除，再插入到指定的位置。 如下代碼示例，就是將 HTML 頁(yè)面原有的節(jié)點(diǎn)插入到指定位置: ```javascript var parent = document.getElementById('parent'); var button = document.getElementById('btn'); // 將新節(jié)點(diǎn)添加到父節(jié)點(diǎn)中 parent.appendChild(button); ``` > **值得注意的是:** appendChild() 方法只能允許在同一個(gè) HTML 頁(yè)面中實(shí)現(xiàn)插入節(jié)點(diǎn)的功能，而不能實(shí)現(xiàn)跨 HTML 頁(yè)面的插入節(jié)點(diǎn)的功能。 ## insertBefore() 方法 Node 對(duì)象除了提供了 appendChild() 方法可以實(shí)現(xiàn)插入節(jié)點(diǎn)之外，還提供了 insertBefore() 方法同樣可以實(shí)現(xiàn)插入節(jié)點(diǎn)的功能。其語(yǔ)法結(jié)構(gòu)如下: ```javascript var insertedElement = parentElement.insertBefore(newElement, referenceElement); ``` 由于 insertBefore() 方法實(shí)現(xiàn)的是將一個(gè)節(jié)點(diǎn)插入到指定節(jié)點(diǎn)的某個(gè)子節(jié)點(diǎn)的前面。所以，在上述語(yǔ)法結(jié)構(gòu)中: - 參數(shù) referenceElement 表示指定節(jié)點(diǎn)的某個(gè)子節(jié)點(diǎn) - 參數(shù) newElement 表示插入的節(jié)點(diǎn) - 調(diào)用 insertBefore() 方法的 parentElement 表示指定的節(jié)點(diǎn) - 作為返回值的 insertedElement 表示被插入的節(jié)點(diǎn)，即 newElement 我們可以通過(guò)如下代碼示例，學(xué)習(xí) insertBefore() 方法的使用: ```javascript // 獲取目標(biāo)父節(jié)點(diǎn) var parentElement = document.getElementById('parent'); // 創(chuàng)建新節(jié)點(diǎn) var newElement = document.createElement('button'); newElement.setAttribute('class','button'); var text = document.createTextNode('A New Button'); newElement.appendChild(text); // 獲取目標(biāo)節(jié)點(diǎn) var referenceElement = document.getElementById('btn'); // 將新節(jié)點(diǎn)添加到父節(jié)點(diǎn)中 parentElement.insertBefore(newElement, referenceElement); ``` > **值得注意的是:** 如果我們是將 HTML 頁(yè)面中原有的節(jié)點(diǎn)插入到指定節(jié)點(diǎn)的某個(gè)子節(jié)點(diǎn)的前面，那這個(gè)被插入的節(jié)點(diǎn)會(huì)先從原有的位置移除，再插入到指定的位置。 如下代碼示例，就是將 HTML 頁(yè)面原有的節(jié)點(diǎn)插入到指定位置: ```javascript // 獲取目標(biāo)父節(jié)點(diǎn) var parentElement = document.getElementById('parent'); // 獲取被插入的節(jié)點(diǎn) var newElement = document.getElementById('button'); // 獲取目標(biāo)節(jié)點(diǎn) var referenceElement = document.getElementById('btn'); // 將新節(jié)點(diǎn)添加到父節(jié)點(diǎn)中 parentElement.insertBefore(newElement, referenceElement); ``` > **值得注意的是:** 如果 referenceElement 為 null 則 newElement 將被插入到子節(jié)點(diǎn)的末尾。 ## 關(guān)于 insertAfter() 方法 我們需要注意的是，Node 對(duì)象中并沒(méi)有提供 insertAfter() 方法。所以，我們并不能像使用 jQuery 中的 insertAfter() 方法一樣使用。 但是，如果我們?cè)陂_(kāi)發(fā)中需要 insertAfter() 方法的話，是可以利用 insertBefore() 方法來(lái)實(shí)現(xiàn)的。 實(shí)現(xiàn)思路其實(shí)就是利用 insertBefore() 方法將被插入的節(jié)點(diǎn)插入到指定節(jié)點(diǎn)的下一個(gè)相鄰兄弟的前面，最終實(shí)現(xiàn)插入到指定節(jié)點(diǎn)的后面的效果。 ```javascript parentElement.insertBefore(newElement, referenceElement.nextSibling); ``` 但由于主流瀏覽器存在空白節(jié)點(diǎn)的問(wèn)題，所以，在真正實(shí)現(xiàn)時(shí)不能簡(jiǎn)單地直接通過(guò) nextSibling 屬性來(lái)解決的。 最后，真正可以實(shí)現(xiàn) insertAfter() 方法的主要邏輯如下: ```javascript var nextElement = referenceElement.nextSibling; if(nextElement.nodeType === 3){ nextElement = nextElement.nextSibling; } parentElement.insertBefore(newElement, nextElement); ``` 如果 referenceElement 沒(méi)有下一個(gè)相鄰的兄弟節(jié)點(diǎn)的話，那 referenceElement 一定是該子節(jié)點(diǎn)列表的最后一個(gè)子節(jié)點(diǎn)。這樣 referenceElement.nextSibling 返回的值為 ull，newElement 就會(huì)被插入到子節(jié)點(diǎn)列表的最后面。 > **值得注意的是:** 關(guān)于 insertAfter() 方法，我們這里只是提供了一個(gè)解決的思路。在具體使用時(shí)，可能封裝的具體用法也會(huì)不同。