纯 JavaScript 方法将内容包装在 div 中

在前端开发中，我们经常需要将 HTML 元素包含在一个 div 容器中。这是为了方便样式编写和组件化开发。在本文中，我们将介绍一种使用纯 JavaScript 的方法来实现这个功能。

1. 使用 createElement 和 appendChild 方法

JavaScript 提供了一些 DOM API 来创建和修改 HTML 元素。我们可以使用 document.createElement() 方法来创建一个新的 div 元素，然后使用 element.appendChild() 方法将目标元素添加到新创建的 div 元素中。

示例代码如下：

function wrap(target) {
  const wrapper = document.createElement("div");
  target.parentNode.insertBefore(wrapper, target);
  wrapper.appendChild(target);
}

在上述代码中，wrap() 函数接受一个参数 target，它是需要被包装在 div 中的 HTML 元素。首先，我们创建一个新的 div 元素 wrapper，然后使用 insertBefore() 方法将其插入到 target 元素之前（即在 target 元素的父节点中插入）。最后，我们使用 appendChild() 方法将 target 元素添加到 wrapper 元素中，完成包装操作。

2. 使用 insertAdjacentHTML 方法

除了使用 DOM API，我们还可以使用 insertAdjacentHTML() 方法来添加 HTML 元素。该方法接受两个参数：position 和 text。其中，position 指定要插入的位置，共有四个值可选："beforebegin"、"afterbegin"、"beforeend" 和 "afterend"；text 是要插入的 HTML 字符串。

示例代码如下：

function wrap(target) {
  const wrapper = document.createElement("div");
  target.insertAdjacentHTML("beforebegin", wrapper.outerHTML);
  wrapper.appendChild(target);
}

此处我们同样创建一个新的 div 元素 wrapper，然后调用 insertAdjacentHTML() 方法，在目标元素之前插入 wrapper 的 HTML 字符串表示。最后，我们将 target 元素添加到 wrapper 元素中，完成包装操作。

3. 使用 cloneNode 和 replaceWith 方法

除了以上两种方法外，我们还可以使用 cloneNode() 和 replaceWith() 方法来实现包装功能。首先，我们使用 cloneNode() 方法克隆目标元素，并将其存储在一个新变量 clone 中。接着，我们创建一个新的 div 元素 wrapper，将其插入到 clone 元素之前，最后使用 replaceWith() 方法将 clone 元素替换为 wrapper 元素。

示例代码如下：

function wrap(target) {
  const clone = target.cloneNode(true);
  const wrapper = document.createElement("div");
  target.parentNode.insertBefore(wrapper, clone);
  wrapper.appendChild(clone);
  target.replaceWith(wrapper);
}

通过上述代码，我们可以看出 cloneNode() 方法的应用场景非常广泛。在这里，我们克隆了目标元素，将其添加到新创建的 wrapper 元素中。然后使用 replaceWith() 方法将目标元素替换为 wrapper 元素，实现了包装操作。

4. 总结

在本文中，我们介绍了三种纯 JavaScript 的方法来将 HTML 元素包装在一个 div 容器中。其中，第一种方法使用了 DOM API 中的 createElement() 和 appendChild() 方法；第二种方法使用了 insertAdjacentHTML() 方法；第三种方法则结合了 cloneNode()、insertBefore() 和 replaceWith() 方法。

无论哪种方法，都可以帮助我们快速地将 HTML 元素包装在一个容器中，以便于样式编写和组件化开发。在实际开发中，我们可以根据具体情况选择最适合自己的方法。

希望本文能

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26863