原生JS DOM 重点知识笔记（第三期）

用DOM方法动态插入标签

一、使用createElement方法创建标签

1. 让id等于testdiv的div内容进行操作

	<div id="testdiv">
		这里是文本
	</div>

然后创建一个p标签，未归到DOM节点里面，还是文档碎片

	var para=document.createElement("p");

二、appendChild方法添加标签

能够把子元素添加到父元素的标签里面

	parent.appendChild(child);

将刚刚创建的p元素添加到id为testdiv的父元素里面。

	var textdiv=document.getElementById("textdiv");
	textdiv.appendChild(para);

三、创建文本节点createTextNode方法

创建一个文本节点，并插入到刚才创建的p标签中。

    var txt=document.createTextNode("Holle Word");
    para.appendChild(txt);//依旧使用appendChild;

四、使用insertBefore方法在已有的元素前插入一个元素

需要用到的节点有:

1. 新元素：newElement
2. 目标元素:targetElement
3. 父元素：目标元素的父元素：parentElement

//找到目标元素的夫元素：
var gallery=document.getElementById("targetElement");
//进行插入
gallery.parentNode.insertBefore(newElement,targetElement);

五、编写insertAfter函数

function insertAfter(newElement,targetElement)
{
	var parent=targetElement.parentNode;//把目标元素的parentNode属性值保存到变量parent里
	if(parent.lastChild==targetElement)//判断是否是parent的最后一个子元素
	{
		parent.appendChild(newElement);//直接追加到元素里，这样新元素就刚好被插入到目标元素之后
	}else{
		parent.insertBefore(newElement,targetElement.nextSibling)//如果不是，那就插入到目标元素和下一个兄弟元素之间
	}
}

后排提示: 本系列知识点部分摘自《JavaScript DOM 编程艺术 》（第二版）一书