700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 【JavaScript】原生js中DOM操作之元素创建 插入和移除

【JavaScript】原生js中DOM操作之元素创建 插入和移除

时间:2019-07-16 06:36:21

相关推荐

【JavaScript】原生js中DOM操作之元素创建 插入和移除

创建元素

<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.valueif (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()

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。