JavaScript DOM 動態配置

透過 JavaScript 可以針對 DOM 文件樹結構元素進行動態操作,包含動態建立元素、加入子元素或是移除特定元素等等

原文出處

透過 JavaScript 可以針對 DOM 文件樹結構元素進行動態操作,包含動態建立元素、加入子元素或是移除特定元素等等。Document 物件的 createElement() 方法支援新節點的建立,語法如下:

var d = document.createElement() ; 

這一行會建立一個新的 DIV標籤元素,接下來,只要將其加入文件中指定的位置即可,方法 appendChild() 支援相關的操作。

container.appendChild(d);

這一行程式碼將上述新建立的元素加入指定的元素 e 當中。你也可以透過 revmoveChild() 將指定的節點刪除,所需的語法如下:

container.revmoveChild(e);

這一行程式碼執行完畢之後,container 中的元素 e 會被刪除,你也可以利用以下的技巧,直接刪除某個節點不需理會它所屬的容器。

e.parent.removeChild(e);

e為所要刪除的元素,首先引用 e.parent 取得其所屬的容器,然後將其刪除。來看看以下的清單:

** 此為靜態文件,操作請至原文

其中六個 li 標籤元素於網頁完成載入時動態建立並加入名稱為 list 的 <ul> 標籤元素中,點擊每一個清單項目便會將其移除,程式碼如下:



    <script>
        var l = document.getElementById('list');
        for (i = 0; i < 6; i++) {
            var item = document.createElement('LI');           
            item.addEventListener('click',function(){
                var parent = this.parentNode;
                parent.removeChild(this);
            });
            item.innerHTML = i;
            l.appendChild(item);
        }
    </script>

首先配置一個 ul 標籤作為清單容器,將其命名為 list ,當網頁建立之後,透過一個迴圈動態建立並加入六個 li 標籤元素,同時註冊其 click 事件處理器,如此一來,當使用者點擊任何一個節點, li 元素便會被刪除。

原文出處