📅 最后修改于: 2023-12-03 15:14:16.973000 🧑 作者: Mango
在 JavaScript 编程中，有时我们需要动态地创建 HTML 元素和向这些元素添加文本内容。为了实现这一点，我们可以使用 createElement 和 textNode 这两个函数。
createElement 函数用于创建一个新的 HTML 元素。我们可以通过给这个函数传递一个标签名作为参数来指定要创建的元素类型。以下是一个示例：
var newElement = document.createElement("h1");
上述代码将创建一个 h1 元素。
一旦创建了元素，我们可以通过使用其他属性和方法来修改它，例如改变其内容、样式、父元素等。
textNode 函数将创建一个文本节点，该节点可以被添加到已存在的 HTML 元素中。我们可以通过传递一个字符串作为参数来指定文本内容。以下是一个示例：
var newText = document.createTextNode("Hello, world!");
上述代码将创建一个文本节点，其文本内容为 "Hello, world!"。
一旦创建了文本节点，我们可以通过将其附加到其他元素中来显示该文本。下面的示例演示了如何在一个元素中添加一个文本节点：
var element = document.createElement("p");
var text = document.createTextNode("This is some text.");
element.appendChild(text);
上述代码将创建一个 p 元素，并在其中添加一个文本节点。
以下是一个使用 createElement 和 textNode 创建和添加元素的完整示例：
// 创建一个 <div> 元素
var divElement = document.createElement("div");
// 创建一个文本节点，并设置其内容
var textNode = document.createTextNode("Hello!");
// 将文本节点添加到 div 元素中
divElement.appendChild(textNode);
// 为 div 元素设置一些样式
divElement.style.color = "red";
divElement.style.padding = "10px";
// 将 div 元素添加到文档中的 <body> 元素中
document.body.appendChild(divElement);
上述代码将创建一个带有文本内容的红色背景的 div 元素，并将其添加到文档的 body 元素中。
通过使用 createElement 和 textNode 函数，JavaScript 程序员能够以动态的方式创建和添加 HTML 元素及其内容到页面中。这为程序员提供了更大的灵活性和控制力。