使用原生JS在指定元素后添加内容

简介：
本教程讲解如何利用纯JavaScript在网页中选定DOM元素之后插入新的HTML内容，无需借助jQuery或其他库。 在Web开发过程中，我们常常需要动态地调整页面元素的结构或内容。JavaScript提供了丰富的DOM操作API，使开发者能够灵活操控网页上的各种元素。 本段落将介绍如何利用原生JavaScript为特定的HTML标签追加新的内容。首先我们需要理解DOM节点之间的关系：每个DOM节点都有一个父级节点（parentNode），以及多个子级节点（childNodes）。在这些子级中，每个节点都具有唯一的索引位置，并可以通过这个索引来访问相应的元素；此外，每种类型的节点还拥有firstChild和lastChild属性来指向其第一个或最后一个子项。 为了实现这一功能，我们首先通过`document.getElementById()`方法获取目标元素。例如，在本例中我们的目标是ID为“header”的HTML标签。然后使用`document.createElement()`创建一个新的DOM节点——这里以段落（

）为例说明如何操作。 值得注意的是，原生JavaScript并没有直接提供一个函数可以实现将新内容追加到某个特定元素之后的功能。因此我们需要自己编写这个功能的代码。为此我们定义了一个名为`insertAfter`的自定义函数，它接受两个参数：一个是需要插入的新节点（newElement），另一个是目标节点（targetElement）。 在`insertAfter`函数内部，首先获取了目标节点的父级元素，并判断该目标是否为最后一个子项。如果是，则使用`.appendChild()`方法将新创建的DOM对象添加到其后；如果不是最后一位的话，则通过`.insertBefore(newElement, targetElement.nextSibling)`的方式插入新的内容。 原生JavaScript虽然没有提供直接追加功能，但可以通过组合使用父级节点的方法来实现这一需求：当目标元素是最后一个子项时调用`appendChild()`方法，在其他情况下则采用`.insertBefore()`。这允许我们根据实际需要灵活地修改DOM结构，并广泛应用于各种动态内容调整的场景中。 为了确保代码能够正确运行，需要注意的是在使用父级节点的方法插入新元素时，例如`parent.appendChild(newElement)`或`parent.insertBefore(newElement, targetElement.nextSibling)`, 参数传递的方式是正确的。修正后的函数应该如下所示： ```javascript function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if (parent.lastChild === targetElement) { // 目标元素为最后一个子节点，直接在其后添加 parent.appendChild(newElement); } else { // 目标元素不是最后一个子节点，使用insertBefore插入到其下一个兄弟节点前 parent.insertBefore(newElement, targetElement.nextSibling); } } ``` 通过这种方式，我们可以不依赖任何额外库就能灵活控制DOM结构和内容的更新，并实现丰富的页面交互效果。