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>

JS中查找、增删元素

猜你喜欢