如何使用 JavaScript 动态添加 HTML 元素？

在前端开发中，经常需要使用 JavaScript 动态添加 HTML 元素。HTML 元素的动态添加可以帮助我们根据需求动态生成页面内容，提高用户体验。下面是具体的实现方法。

使用 document.createElement() 方法创建元素

在 JavaScript 中，可以使用 document.createElement() 方法来创建 HTML 元素。该方法接收一个参数，表示要创建元素的标签名。

// 创建一个 p 元素
var pElement = document.createElement('p');

// 创建一个 div 元素
var divElement = document.createElement('div');

使用 element.appendChild() 方法添加子元素

使用 document.createElement() 方法创建的元素，需要使用 element.appendChild() 方法添加到页面中。

// 创建一个 div 元素
var divElement = document.createElement('div');

// 创建一个 p 元素
var pElement = document.createElement('p');

// 将 p 元素添加到 div 元素中
divElement.appendChild(pElement);

// 将 div 元素添加到页面 body 中
document.body.appendChild(divElement);

使用 innerHTML 属性添加 HTML 内容

除了使用 document.createElement() 方法和 element.appendChild() 方法创建和添加元素外，还可以使用 innerHTML 属性来添加 HTML 内容。

// 创建一个 div 元素
var divElement = document.createElement('div');

// 添加 HTML 内容
divElement.innerHTML = '<p>Hello World!</p>';

// 将 div 元素添加到页面 body 中
document.body.appendChild(divElement);

使用 insertAdjacentHTML() 方法添加 HTML 内容

我还可以使用 insertAdjacentHTML() 方法来添加 HTML 内容。该方法需要两个参数，第一个参数表示插入位置，第二个参数表示要插入的 HTML 内容。

// 创建一个 div 元素
var divElement = document.createElement('div');

// 添加 HTML 内容
divElement.insertAdjacentHTML('beforeend', '<p>Hello World!</p>');

// 将 div 元素添加到页面 body 中
document.body.appendChild(divElement);

在前端开发中，动态添加 HTML 元素是非常常见的一种操作。以上介绍的方法均为在 JavaScript 中实现动态添加 HTML 元素的常用方法，可以根据实际需求选择使用。