3.6 动态创建网页新文本段落

HTML DOM定义了一个createElement()方法，可以用于创建各种元素节点，同时该方法返回一个元素对象。在新的元素节点创建好后，再通过appendChild()方法或insertBefore()方法插入元素节点，就可以实现动态创建网页元素的功能了。

下面介绍一个很常用的JavaScript动态创建新的文本段落（<p>标签元素）的代码实例。

关于【代码3-6】的说明：

● 第13行、第14～16行和第17～20行代码分别通过标签<div>定义3个层对象，在每个层中分别加入了不同数量的段落标签<p>，目的是为了分别实现动态创建、追加和插入文本段落的功能。

● 第26～31行代码定义的函数实现了动态创建文本段落的操作；第28～29行代码通过createElement()方法创建了一个段落<p>对象（p1），并通过innerText属性定义了文本内容；第30行代码通过appendChild()方法将新创建的文本段落（p1）对象动态插入到第13行代码定义的标签<div>中。

● 第32～37行代码定义的函数实现了动态追加文本段落的操作。注意，appendChild()方法会将新对象自动插入同级兄弟对象的最后位置。

● 第38～46行代码定义的函数实现了动态插入文本段落的操作。注意，该操作是通过insertBefore()方法实现的，因为appendChild()方法是无法实现将新对象插入到同级兄弟对象之间的。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图3.6所示。

图3.6 JavaScript动态创建网页新文本段落