【JavaScript】原生js中DOM操作之元素建立、插入和移除
阿新 • • 發佈：2021-01-10
技術標籤：JS例項javascriptjs
建立元素
<body> <input type="text" id="txt1"> <input type="button" id="btn1" value="建立"> <ul id="ul1"> </ul> <script> window.onload = function () { var oUl = document.getElementById('ul1'); var oBtn = document.getElementById('btn1') var oTxt = document.getElementById('txt1') var aLi = oUl.getElementsByTagName('li') oBtn.onclick = function () { var oLi = document.createElement('li') //建立元素 oLi.innerHTML = oTxt.value if (aLi.length > 0) { oUl.insertBefore(oLi, aLi[0]) //插入元素到指定位置 } else { oUl.appendChild(oLi) //插入元素到容器末尾 } oTxt.value = '' } } </script> </body>
移除元素
<body> <ul id="ul1"> <li>hjsioug<a href="javascript:;">刪除</a></li> <li>fssaaa<a href="javascript:;">刪除</a></li> <li>fddvfthc<a href="javascript:;">刪除</a></li> <li>gwsvgeex<a href="javascript:;">刪除</a></li> </ul> <script> window.onload = function () { var oUl = document.getElementById('ul1'); var aA = oUl.getElementsByTagName('a'); for(var i = 0; i < aA.length; i++){ aA[i].onclick = function(){ oUl.removeChild(this.parentNode) //removeChild a標籤的父節點 } } } </script> </body>
文件碎片
document.createDocumentFragment()