dom沒有insertAfter方法怎么辦

zhkai 發(fā)布于2019-08-20 12:08 / 1403人閱讀

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

1代碼

DOM 沒有insertAfer()方法，那么我們就自己定義一個insertAfter()的方法吧！
        用到的DOM 方法：
            parentNode      屬性
            lastChild           屬性
            appendChild    方法
            insertBefore     方法
            nextSibling       屬性
        //函數(shù)有兩個參數(shù)
        newElement：需要插入的元素節(jié)點
        targetElement：目標節(jié)點
        
        function insertAfter(newElement,targetElement)
        {
            /到父級；
            var parent=targetElement.parentNode;
            //判斷父級末尾節(jié)點
            if(parent.lastChild==targetElement)
            {
                //末尾節(jié)點就是目標節(jié)點，那就簡單多了，直接用appendChild
                perent.appentChild(newElement);
            }
            else
            {
                //末尾節(jié)點不是目標節(jié)點，用insertBefore，并用nextsibling找到目標節(jié)點；
                parent.insertBefore(newElement,targetElement.nextsibling);
            }
        }

2.阻止事件冒泡

 stopPropagation:function(e){
        var e = ev||event;
        e = e || window.event;
        if(e.stopPropagation) { //W3C阻止冒泡方法
            e.stopPropagation();
        } else {
            e.cancelBubble = true; //IE阻止冒泡方法
        }
    }

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

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

相關(guān)文章

看Zepto如何實現(xiàn)增刪改查DOM

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

lookSomeone 2019-08-01 17:45 評論0 收藏0
看Zepto如何實現(xiàn)增刪改查DOM

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

Clect 2019-08-21 16:52 評論0 收藏0
看Zepto如何實現(xiàn)增刪改查DOM

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

VioletJack 2019-08-30 15:53 評論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
細說 jQuery DOM操作篇（二） - DOM 樹操作

摘要：此時，點擊新建的將會觸發(fā)。設(shè)置元素內(nèi)容的方法則使用上述兩種方法，將新內(nèi)容作為參數(shù)傳遞即可，例如修改上例中的文本內(nèi)容方法同理。我們知道通過 $() 函數(shù)可以訪問文檔中的元素，并返回一個 jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內(nèi)容，實際上，我們還可以通過該函數(shù)做更多的事情，例如添加、刪除、復(fù)制等操作來改變 DOM 樹的結(jié)構(gòu)。創(chuàng)建元素我們可以通過 $() ...

Anchorer 2019-08-21 12:20 評論0 收藏0