5.2 创建元素节点和文本节点

5.2  创建元素节点和文本节点

JavaScript不仅能够修改DOM中的元素，它还能够创建新的元素，并且能够把新元素放到DOM结构中的任意位置。

 方 法

createElements就是创建新元素的函数。需要提供的只是一个参数——指明想创建的元素的类型，返回值则指向新创建的元素。

File: create_elements.js (excerpt)

var newAnchor = document.createElement("a");

变量newAnchor是一个新元素，可以被插入页面中。

	在文档中指定名字空间为XML MIME类型
	如果在MIME类型为application/xhtml+xml（或者其他一些XML MIME类型）的文档中使用JavaScript，应当用加强的函数版本createElementNS来代替createElement。这样可以指定所创建的元素的名字空间： var newAnchor = document.createElementNS("http://www.w3.org/1999/xhtml", "a"); 还有一些函数也有这种特别的版本，例如removeElement/removeElementNS和getAttribute/getAttributeNS。不过，在本书中，用不到这些函数的加强版本。 Simon Willison在他的网站中对于JavaScript在不同的MIME类型1中的应用有一个概括的介绍。

一个元素内部的文本实际上是这个元素的一个子文本节点，所以这需要单独地创建。文本节点和元素节点颇有不同，它们有自己的创建函数createTextNode：

File: create_elements.js (excerpt)

var anchorText = document.createTextNode("monoceros");

如果想修改现有的文本节点，可以通过nodeValue属性来访问其文本，从而可以获得和设置一个文本节点中的文本：

var textNode = document.createTextNode("monoceros");

var oldText = textNode.nodeValue;

textNode.nodeValue = "pyxis";

现在oldText的值会成为“monoceros”，同时textNode中的文本变成“pyxis”。

可以使用appendChild函数来将一个元素节点或者一个文本节点添加到某元素的子节点列表的最后。

考虑下面的HTML片段：

File: create_elements.html (excerpt)

<p id="starLinks">

  <a href="sirius.html">Sirius</a>

</p>

也可以使用DOM的函数来创建和插入一个链接到段落的末尾：

File: create_elements.js (excerpt)

var anchorText = document.createTextNode("monoceros");

var newAnchor = document.createElement("a");

newAnchor.appendChild(anchorText);

var parent = document.getElementByIdx("starLinks");

var newChild = parent.appendChild(newAnchor);

变量newChild将指向新的被插入的元素。

如果想看看这段代码执行之后的DOM的状态，它大概应该像这样：

<p id="starLinks">

  <a href="sirius.htm">Sirius</a><a>monoceros</a>

</p>

不过因为没有指定这个新元素的任何属性，所以实际上它不会链接到任何地方。关于处理和指定属性的内容将会在“读写元素属性”一节中介绍。

 讨 论

有3种基本的方法来将新的元素节点或者文本节点插入到网页中，选择哪种方法决定于想把该节点插入到哪里：放到最后，或者放到某节点之前，或者替换掉原有的某个节点。添加到末尾的方法上面已经介绍过了。如果想把节点放到某节点的前面，应该使用insertBefore函数，如果想替换某节点，则应当使用replaceChild函数。

为了使用insertBefore，需要两个参数，一个是待插入的节点，一个是现有的一个节点，目的是为了将待插入节点放到这个现有节点的前面。看看下面的HTML代码：

File: create_elements2.html (excerpt)

<p id="starLinks">

  <a id="sirius" href="sirius.html">Sirius</a>

</p>

可以通过待插入节点的父节点调用insertBefore：

File: create_elements2.js (excerpt)

var anchorText = document.createTextNode("monoceros");

var newAnchor = document.createElement("a");

newAnchor.appendChild(anchorText);

var existingAnchor = document.getElementByIdx("sirius");

var parent = existingAnchor.parentNode;

var newChild = parent.insertBefore(newAnchor, existingAnchor);

变量newChild则指向新插入的元素。

如果想看看这段代码执行之后的DOM的状态，那么大概会变成这样：

<p id="starLinks">

  <a>monoceros</a><a id="sirius" href="sirius.htm">Sirius</a>

</p>

相应地，还可以用replaceChild将现有的链接完全替换掉：

File: create_elements3.js (excerpt)

var anchorText = document.createTextNode("monoceros");

var newAnchor = document.createElement("a");

newAnchor.appendChild(anchorText);

var existingAnchor = document.getElementByIdx("sirius");

var parent = existingAnchor.parentNode;

var newChild = parent.replaceChild(newAnchor, existingAnchor);

DOM如下：

<p id="starLinks">

  <a>monoceros</a>

</p>