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 元素便會被刪除。





    沒有留言: