📅 最后修改于: 2023-12-03 14:50:56.910000 🧑 作者: Mango
当我们在网页中需要添加新的 HTML 元素时，可以使用 JavaScript 动态创建它们。本文将向你介绍如何使用 JavaScript 创建和附加元素。
我们可以使用 document.createElement() 方法创建一个新的元素，并将其存储在 JavaScript 变量中。以下是一个基本例子，它创建一个新的 <div> 元素：
let div = document.createElement('div');
在上面的例子中，我们创建了一个新的变量 div，它存储了一个新创建的 <div> 元素。
你也可以使用其他标签名称来创建不同的元素。例如，使用以下代码可以创建一个新的 <p> 元素：
let paragraph = document.createElement('p');
一旦我们创建了新元素，我们可以使用不同的属性和方法来处理它。例如，我们可以使用 textContent 属性向元素添加文本内容：
div.textContent = 'Hello, world!';
在上面的代码中，我们使用 textContent 属性将字符串 "Hello, world!" 添加到 <div> 元素中。
此外，我们还可以使用 innerHTML 属性向元素中添加 HTML 内容。例如，使用以下代码将带有链接的段落添加到 <div> 元素中：
div.innerHTML = '<p>Here\'s a <a href="https://www.example.com">link</a>.</p>';
最后，我们需要将新创建的元素添加到文档中。我们可以使用 appendChild() 方法将元素添加到另一个元素的末尾。例如，我们可以使用以下代码将新建的 <div> 元素添加到文档的 <body> 中：
document.body.appendChild(div);
上面的代码将 <div> 元素添加到文档的 <body> 中。你可以根据你的需要选择不同的元素，例如，你可以在一个 <form> 元素中添加一个新的 <input> 元素。
使用 JavaScript 来创建和附加元素可以为我们带来更好的灵活性，让我们直接在客户端管理和操作 HTML 内容。通过本文，你已经学会了如何在 JavaScript 中创建元素、添加内容以及将它们添加到文档中。