javascript：appendChild、insertBefore和insertAfter

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

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

appendChild：

target.appendChild(newChild)

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

insertBefore：

target.insertBefore(newChild,existingChild)

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90868.html

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

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

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

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

rainyang 2019-08-21 11:54 評論0 收藏0
dom沒有insertAfter方法怎么辦

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

zhkai 2019-08-20 12:08 評論0 收藏0
不要過度依賴JQuery（一）

摘要：毫無疑問，是一款非常優(yōu)秀的庫，它讓我們開發(fā)項目變得更加便捷容易。不過，當你準備在一個項目特別是移動項目中使用時，你真的該好好思考一下，你會用到的哪些功能，是否真的需要。毫無疑問，JQuery是一款非常優(yōu)秀的JavaScript庫，它讓我們開發(fā)項目變得更加便捷容易。不過，當你準備在一個項目（特別是移動項目）中使用JQuery時，你真的該好好思考一下，你會用到JQuery的哪些功能，是...

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

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

lookSomeone 2019-08-01 17:45 評論0 收藏0