在 JavaScript 中动态创建标签

在 JavaScript 中，我们可以使用 DOM（文档对象模型）操作来动态地创建和修改 HTML 标签。这种方式允许我们在网页加载后通过 JavaScript 来创建、修改和删除标签，为网页添加交互性和动态性。

创建标签

要在 JavaScript 中创建标签，我们可以使用 document.createElement(tagName) 方法。这个方法会根据指定的标签名创建一个新的 HTML 元素节点，并返回该节点的引用。

以下是一个例子，演示如何创建一个段落（<p>）标签并将其添加到文档中：

// 创建一个段落标签
var paragraph = document.createElement("p");

// 创建段落的文本内容
var text = document.createTextNode("这是一个新的段落。");

// 将文本节点添加到段落标签中
paragraph.appendChild(text);

// 将段落标签添加到文档的 body 中
document.body.appendChild(paragraph);

修改标签

使用 DOM 操作，我们可以动态地修改已经存在的标签。例如，我们可以修改标签的文本内容、样式属性、类名等。

以下是一个例子，演示如何修改一个段落标签的文本内容和样式：

// 获取第一个段落标签
var paragraph = document.querySelector("p");

// 修改段落的文本内容
paragraph.textContent = "这是修改后的文本。";

// 修改段落的样式属性
paragraph.style.color = "red";

删除标签

要删除一个标签，我们可以使用标签的父节点来移除该标签。使用 parentNode.removeChild(node) 方法可以将指定的节点从文档中移除。

以下是一个例子，演示如何删除一个段落标签：

// 获取第一个段落标签
var paragraph = document.querySelector("p");

// 获取段落的父节点并移除段落
paragraph.parentNode.removeChild(paragraph);

以上是在 JavaScript 中动态创建、修改和删除标签的基本操作。通过这些 DOM 操作，我们可以根据需要来动态地更新网页内容，添加交互性和动态效果。