標籤：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標題文檔</title><script>window.onload = function() { var oText = document.getElementById(‘text1‘); var oBtn = document.getElementById(‘btn‘); var oUl = document.getElementById(‘ul1‘); oBtn.onclick = function() { //建立li元素 var oLi = document.createElement(‘li‘);//document.createElement(標籤名稱); 建立元素 oLi.innerHTML = oText.value; //建立a 刪除元素 var oA = document.createElement(‘a‘); oA.innerHTML = ‘刪除‘; oA.href = ‘javascript:;‘; //刪除事件 oA.onclick = function() { oUl.removeChild( this.parentNode );//父級.removeChild(要刪除的元素); 要刪除元素的父級 this表示當前 } oLi.appendChild( oA ); /* 父級.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一個新元素 在ie下如果第二個參數的節點不存在，會報錯 在其他標準瀏覽器下如果第二個參數的節點不存在，則會以appendChild的形式進行添加 oUl.insertBefore( oLi, oUl.children[0] ); */ if ( oUl.children[0] ) { oUl.insertBefore( oLi, oUl.children[0] ); } else { oUl.appendChild( oLi );//父級.appendChild(要添加的元素) 方法 追加子項目 oUl.appendChild( oLi ); } } }</script></head><body> <input type="text" id="text1" /><input type="button" value="留言" id="btn" /> <ul id="ul1"></ul></body></html>
建立刪除元素appendChild,removeChild,createElement,insertBefore
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
