JS中查找、增删元素
<html> <head> <meta charset="utf-8" /> <title>查找元素</title> </head> <body> <div> <div>对酒当歌,人生几何</div> <div id="zhouqi">日照香炉生紫烟,遥看瀑布挂前川</div> <div>唧唧复唧唧,木兰当户织</div> </div> <div>我寄愁心与明月,随风直到夜郎西</div> </body> <script> var zhouqi = document.getElementById('zhouqi') console.log(zhouqi.innerText) // 获取前面的同胞元素 var prev = zhouqi.previousElementSibling || zhouqi.previousSibling console.log(prev.innerText) // 获取后面的同胞元素 var next = zhouqi.nextElementSibling || zhouqi.nextSibling console.log(next.innerText) // 查找父元素 var parent = zhouqi.parentNode var uncle = parent.nextElementSibling || parent.nextSibling console.log(uncle.innerText) // 获取所有子元素 var children = parent.children console.log(children[0].innerText) // 获取第一个子元素 var first = parent.firstElementChild || parent.firstChild console.log(first.innerText) // 获取最后一个子元素 var last = parent.lastElementChild || parent.lastChild console.log(last.innerText) </script> </html>
<html> <head> <meta charset="utf-8" /> <title>创建删除元素</title> </head> <body> <input type="file" /><button>添加</button> </body> <script> var btn = document.getElementsByTagName('button')[0] btn.onclick = function () { // 创建一个div元素 var div = document.createElement('div') // 创建一个input元素 var input = document.createElement('input') input.type = 'file' // 将input元素添加到div元素中 div.appendChild(input) // 创建一个删除按钮 var button = document.createElement('button') button.innerText = '删除' // 添加事件 button.onclick = function () { // 找到父级元素(div) var parent = this.parentNode // 找到祖父级元素(body) var grand = parent.parentNode // 删除父级元素(div) grand.removeChild(parent) } // 将button元素添加到div元素中 div.appendChild(button) // 添加元素 btn.parentNode.appendChild(div) } </script> </html>