javascript：appendChild、insertBefore和insertAfter

sunnyxd 發(fā)布于2019-08-22 10:34 / 1889人閱讀

摘要：作為的子節(jié)點(diǎn)插入最后的一子節(jié)點(diǎn)之后作為的子節(jié)點(diǎn)插入到節(jié)點(diǎn)之前為可選項(xiàng)參數(shù)，當(dāng)為時(shí)其效果與一樣顧名思義，就是在后面增加，但是沒(méi)有現(xiàn)成的提供調(diào)用，但也很容易的自己可以寫(xiě)

appendChild：

target.appendChild(newChild)

newChild作為target的子節(jié)點(diǎn)插入最后的一子節(jié)點(diǎn)之后

insertBefore：

target.insertBefore(newChild,existingChild)

newChild作為target的子節(jié)點(diǎn)插入到existingChild節(jié)點(diǎn)之前

existingChild為可選項(xiàng)參數(shù)，當(dāng)為null時(shí)其效果與appendChild一樣
insertAfter:

顧名思義，就是在node后面增加new node，但是沒(méi)有現(xiàn)成的API提供調(diào)用，但也很容易的自己可以寫(xiě)：

function insertAfter(newEl, targetEl)
{
    var parentEl = targetEl.parentNode;
            
    if(parentEl.lastChild == targetEl)
    {
       parentEl.appendChild(newEl);
    }else{
       parentEl.insertBefore(newEl,targetEl.nextSibling);
    }            
}

GPU云服務(wù)器云服務(wù)器 appendChild insertAfter insertBefore() insertBefore

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90868.html

相關(guān)文章

【EASYDOM系列教程】之插入節(jié)點(diǎn)

摘要：值得注意的是如果我們是將頁(yè)面中原有的節(jié)點(diǎn)插入到指定節(jié)點(diǎn)的子節(jié)點(diǎn)列表的最后面，那這個(gè)被插入的節(jié)點(diǎn)會(huì)先從原有的位置移除，再插入到指定的位置。 Node 對(duì)象提供了一些用于向 HTML 頁(yè)面插入節(jié)點(diǎn)的方法，通過(guò)這些方法我們可以實(shí)現(xiàn)向 HTML 頁(yè)面新增元素，或者移動(dòng) HTML 頁(yè)面中的元素。 appendChild() 方法 Node 對(duì)象提供的 appendChild() 方法可以向指定節(jié)...

jk_v1 2019-08-20 18:23 評(píng)論0 收藏0
jQuery DOM節(jié)點(diǎn)的創(chuàng)建、插入、刪除

摘要：通過(guò)方法添加的元素剛好相反，內(nèi)容在方法前面，無(wú)論是一個(gè)選擇器表達(dá)式或創(chuàng)建作為標(biāo)記上的標(biāo)記它都將被插入到目標(biāo)容器的末尾。主要的不同是語(yǔ)法特別是插入內(nèi)容和目標(biāo)的位置。 DOM節(jié)點(diǎn)的創(chuàng)建 DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性首先，介紹如何使用JavaScript創(chuàng)建div節(jié)點(diǎn)元素，主要包括創(chuàng)建div節(jié)點(diǎn)元素的屬性和創(chuàng)建div節(jié)點(diǎn)元素的樣式兩大部分內(nèi)容創(chuàng)建流程：創(chuàng)建節(jié)點(diǎn)(常見(jiàn)的：元素、屬性和文本)...

rainyang 2019-08-21 11:54 評(píng)論0 收藏0
dom沒(méi)有insertAfter方法怎么辦

摘要：代碼沒(méi)有方法，那么我們就自己定義一個(gè)的方法吧用到的方法屬性屬性方法方法屬性函數(shù)有兩個(gè)參數(shù)需要插入的元素節(jié)點(diǎn)目標(biāo)節(jié)點(diǎn)到父級(jí)判斷父級(jí)末尾節(jié)點(diǎn)末尾節(jié)點(diǎn)就是目標(biāo)節(jié)點(diǎn)，那就簡(jiǎn)單多了，直接用末尾節(jié)點(diǎn)不是目標(biāo)節(jié)點(diǎn)，用，并用找到目標(biāo)節(jié)點(diǎn)阻止事件冒泡阻止冒泡 1代碼 DOM 沒(méi)有insertAfer()方法，那么我們就自己定義一個(gè)insertAfter()的方法吧！用到的DOM 方法：...

zhkai 2019-08-20 12:08 評(píng)論0 收藏0
不要過(guò)度依賴(lài)JQuery（一）

摘要：毫無(wú)疑問(wèn)，是一款非常優(yōu)秀的庫(kù)，它讓我們開(kāi)發(fā)項(xiàng)目變得更加便捷容易。不過(guò)，當(dāng)你準(zhǔn)備在一個(gè)項(xiàng)目特別是移動(dòng)項(xiàng)目中使用時(shí)，你真的該好好思考一下，你會(huì)用到的哪些功能，是否真的需要。毫無(wú)疑問(wèn)，JQuery是一款非常優(yōu)秀的JavaScript庫(kù)，它讓我們開(kāi)發(fā)項(xiàng)目變得更加便捷容易。不過(guò)，當(dāng)你準(zhǔn)備在一個(gè)項(xiàng)目（特別是移動(dòng)項(xiàng)目）中使用JQuery時(shí)，你真的該好好思考一下，你會(huì)用到JQuery的哪些功能，是...

ckllj 2019-08-20 13:51 評(píng)論0 收藏0
看Zepto如何實(shí)現(xiàn)增刪改查DOM

摘要：先看下圖，我們以刪除元素，插入元素復(fù)制元素，包裹元素和替換元素幾個(gè)模塊分別探究如何一一將其實(shí)現(xiàn)。遍歷當(dāng)前集合中的元素，當(dāng)該元素的父節(jié)點(diǎn)存在的時(shí)候，使用刪除該元素。接下來(lái)我們來(lái)看如何將中創(chuàng)建好的節(jié)點(diǎn)插入到目標(biāo)位置。前言 dom也就是文檔對(duì)象模型，是針對(duì)HTML和XML的一個(gè)api，描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù)。雖然瀏覽器原生給我們提供了許多操作dom的方法，使我們可以對(duì)dom進(jìn)行查找，復(fù)制...

lookSomeone 2019-08-01 17:45 評(píng)論0 收藏0