使用 JavaScript 动态创建 HTML355

JavaScript 是一种强大的编程语言，可用于创建交互式网页。其中一项强大的功能是能够动态创建和修改 HTML 元素。

创建元素

要使用 JavaScript 创建 HTML 元素，可以使用 () 方法。此方法接受一个参数，该参数是要创建的元素的标签名。例如，要创建一个段落元素，可以使用以下代码：```javascript
const paragraph = ('p');
```

新创建的元素将附加到文档中，但尚未在页面上可见。要将其添加到页面中，需要将其附加到另一个元素上。可以使用 appendChild() 方法将元素附加到另一个元素。例如，要将上面创建的段落元素添加到 body 元素，可以使用以下代码：```javascript
(paragraph);
```

设置属性

创建元素后，可以设置其属性。属性是元素的特征，例如其 ID、类名、文本内容等。可以使用 setAttribute() 方法设置属性。例如，要设置段落元素的 ID 属性，可以使用以下代码：```javascript
('id', 'my-paragraph');
```

还可以使用 textContent 属性设置元素的文本内容。例如，要设置段落元素的文本内容，可以使用以下代码：```javascript
= 'Hello, world!';
```

创建表单元素

JavaScript 还可以用于创建表单元素，例如输入框、按钮和下拉列表。可以使用类似于创建其他元素的方法来创建表单元素。例如，要创建一个文本输入框，可以使用以下代码：```javascript
const input = ('input');
('type', 'text');
```

创建表单元素后，可以使用 addEventListener() 方法添加事件监听器。事件监听器会侦听特定事件（例如单击事件）并触发回调函数。例如，要添加一个单击事件监听器到文本输入框，可以使用以下代码：```javascript
('click', () => {
('The input was clicked!');
});
```

使用 DOM 操作 HTML

除了创建和修改元素外，JavaScript 还可以使用 DOM（文档对象模型）来操作现有 HTML。DOM 是一个对象表示 HTML 文档，允许脚本与页面上的元素进行交互。可以使用 getElementById() 和 getElementsByTagName() 等方法来获取对元素的引用。

例如，要获取具有 ID 为 "my-paragraph" 的段落元素，可以使用以下代码：```javascript
const paragraph = ('my-paragraph');
```

然后，可以使用 innerHTML 属性设置元素的 HTML 内容。例如，要将段落元素的内容更改为 "Hello, JavaScript!"，可以使用以下代码：```javascript
= 'Hello, JavaScript!';
```

使用 JavaScript 动态创建和修改 HTML 是添加交互性并增强用户体验的强大工具。本文介绍了创建元素、设置属性、创建表单元素以及使用 DOM 操作 HTML 的基本方法。通过掌握这些技术，JavaScript 开发人员可以创建高度交互式和动态的网页。

2025-02-09

上一篇：JavaScript 中的动态时间

下一篇：JavaScript 的 defer 属性