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>

  

转载于:https://www.cnblogs.com/szqlvlll/p/10140241.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值