2021-01-19

1.js节点的创建与插入

	<script type="text/javascript">
		// 选中父元素节点
		var nodeUl = document.querySelector('ul')

		// 1.创建元素节点
		var nodeLi1 = document.createElement('li')
		nodeLi1.innerHTML = 'aaaa'

		// 2.在父元素节点尾部 插入新节点
		nodeUl.append( nodeLi1 )

		// 1.创建元素节点
		var nodeLi2 = document.createElement('li')
		nodeLi2.innerHTML = 'bbbb'

		// 2.在父元素节点头部 插入新节点
		nodeUl.prepend( nodeLi2 )

		// 1.创建元素节点
		var node3 = document.createElement('h1')
		node3.innerHTML = '节点的创建和插入'

		// 2.在ul之前插入
		nodeUl.before(node3)

		// 1.创建元素节点
		var node4 = document.createElement('img')
		node4.src = './images/1.jpg'

		// 2.在ul之后插入
		nodeUl.after(node4)
	</script>

2.js节点删除

<script type="text/javascript">
		var container = document.querySelector('.container')
		container.onclick = function(e){
			e.target.classList.toggle('active')
		}

		// 删除
		var btn1 = document.querySelector('#btn1')
		btn1.onclick = function(){
			Array.from( container.children ).forEach(item=>{
				if (item.classList.contains('active')) {
					item.remove() // 执行删除操作
				}
			})
		}

		// 克隆
		var btn2 = document.querySelector('#btn2') // 克隆按钮
		var items = document.querySelectorAll('.item') // 所有item
		var item = items[ items.length-1 ]  // 最后一个item
		btn2.onclick = function(){
			// 完全克隆生成新节点,然后插入到第一个子节点位置
			container.prepend( item.cloneNode(true) )
			
		}
</script>