javaScript扫盲之DOM基础(二)

这一篇主要说明动态创建节点。

 

 

innerHTML属性

属性innerHTML可以用来读、写某给定元素里面的HTML内容。并非DOM标准里面的部分，而是HTML的专有属性。

例如：节点testdiv如下，则testdiv.innerHTML的值是<p>This is <em>my</em> content.</p>。

<div id="testdiv">

<p>This is <em>my</em> content.</p>

</div>

由上得，innerHTML属性无细节可言，要想获得细节，就必须使用DOM方法和属性。

在需要把一大段HTML内容插入网页时，innerHTML属性更适用。它既支持读取，又支持写入。

若给testdiv插入一段代码，可写：testdiv.innerHTML=”<p>This is <em>my</em> content.</p>”。

 

【注意】innerHTML属性不会返回任何对刚插入的内容的引用。若想对刚插入的内容进行处理，则需要使用DOM提供的那些精确地方法和属性。浏览器在呈现正宗的XHTML（即MIME类型是application/xhtml+xml的XHTML文档）时会直接忽略掉innerHTML属性。

 

 

 

在DOM看来，一个文档就是一棵节点树，若想在节点树上添加内容，就必须插入新的节点。但不会对源文档产生改变。这种“表里不一”的特点在前面也说过滴。

 

方法createElement创建新的节点

var para = document.createElement("p");<!--[endif]-->

创建的只是文档碎片，需调用appendChild方法将其添加进节点树。

 

方法appendChild插入节点

parent.appendChild(child);

 

方法createTextNode创建文本节点

var text = document.createTextNode("Hello World!");

para.appendChild(text);

 

 

 

方法insertBefore

把一个新元素插入到一个现有元素的前面。

parentElement.insertBefore(newElement, targetElement);

 

在DOM里，元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点）。

然则，文本节点的父元素可以是文本节点吗？证明之~

function test()
{
	//文本节点上可以继续加文本节点
	var bodyNode = document.getElementsByTagName("body")[0];
	
	var para = document.createElement("p");
	bodyNode.appendChild(para);
	
	var text = document.createTextNode("Hello World!");
	para.appendChild(text);
	
	para.appendChild(document.createTextNode("test"));
	//结果是Hello World!test
} 

 

所以，可以在文本节点上再加文本节点。

 

方法insertAfter

把一个新元素插入到一个现有元素的后面。DOM本身没有提供此方法，需要自己来写。 

function insertAfter(newElement, targetElement)
{
	var parentElement = targetElement.parentNode;
	if(parentElement.lastChild == targetElement)
	{
		parentElement.appendChild(newElement);
	}
	else
	{
		parentElement.insertBefore(newElement, targetElement.nextSibling);
	}
}