原生 JS 如何轻松实现 jQuery append 功能

2023-12-30 23:36:23

在现代 Web 开发中，jQuery 仍然是一个流行的 JavaScript 库，它提供了许多简化 DOM 操作的实用函数。其中，append() 方法是开发人员常用的功能，用于将内容附加到选定元素的末尾。然而，在某些情况下，我们可能需要在原生 JavaScript 中实现类似的功能，从而获得更精细的控制和避免引入额外的依赖项。本文将深入探討原生 JS 如何实现 jQuery append 功能，帮助您掌握 DOM 操作的精髓。

1. 创建元素：
首先，我们需要创建一个新的 DOM 元素来附加到目标元素中。使用 createElement() 方法，我们可以指定所需的元素类型，例如 div 或 p。

const newElement = document.createElement('p');

2. 设置内容：
下一步，为新创建的元素设置所需的文本或 HTML 内容。可以使用 innerHTML 或 innerText 属性来实现。

newElement.innerHTML = 'Hello, world!';

3. 获取目标元素：
我们还需要获取目标元素，即要将新元素附加到的现有 DOM 元素。通过使用 querySelector() 或 getElementById() 方法可以轻松获取。

const targetElement = document.querySelector('#target');

4. 附加元素：
最后，使用 appendChild() 方法将新元素附加到目标元素的末尾。此方法将新元素作为目标元素的最后一个子元素插入。

targetElement.appendChild(newElement);

示例：
让我们通过一个简单的示例来说明整个过程：

const newElement = document.createElement('p');
newElement.innerHTML = 'Hello, world!';

const targetElement = document.querySelector('#target');

targetElement.appendChild(newElement);

运行此代码后，"Hello, world!" 文本将附加到具有 id="target" 的元素的末尾。