dom对原生节点、操作篇

在原生中，对dom节点的操作，例如 创建，添加，替换，克隆，删除节点等.....

1.创建节点  

document.createElement('标签名')

var odiv=document.createElement('div')
	console.log(odiv)
	odiv.innerHTML='这是一个新建的div'

2.尾部添加  

document.添加的地方.appendChild('标签名')   类似于数组的push 尾部添加

在html文件中新建一个select框

<section>
		<p>1</p>
		<p>2</p>
		<p>3</p>
	</section>

把刚才新建的div 尾部添加到select框 后方之中

var sec=document.getElementsByTagName('section')[0]
	document.body.appendChild(odiv)
	sec.appendChild(odiv)

3. 父节点添加 insertBefore('新节点','旧节点')  也称为头部添加

console.log(sec.children[2])//获取子节点不包括空
	var span1=document.createElement('span')
	span1.innerHTML='这是一个新建的span'
	sec.insertBefore(span1,sec.children[0])

后续的节点操作类似相同，这里本人懒了一下就不举例子了。

4.替换节点  replaceChild('新节点','旧节点')

    

5.克隆节点  需要克隆的节点.cloneNode(true) true表示里面的所有 false仅表示标签

    

6.删除    父元素.removeChild(需要删除的元素)