JavaScript - 在追加之前将对象包装在 html 容器中

Question

我正在使用弹出灯箱插件，该插件生成下一个/上一个按钮，但它不会将它们放入容器中。我想将它们包装在一个包含元素中，并在插件中找到了生成它们的位置，但我不知道如何包装它们，因为它们是作为对象生成的。

这就是按钮生成的默认代码：

mfp.container.append(arrowLeft.add(arrowRight));

在将它们添加到容器之前，我想将它们包装在带有类

mfp-nav

的 div 中。我尝试了以下操作，但它不起作用，因为按钮是

object

。

mfp.container.append('<div class="mfp-nav">' + arrowLeft.add(arrowRight) + '</div>');

在前端，最终看起来像这样：

<div class="mfp-nav">[object Object]</div>

有没有一种简单的方法可以将此对象包装在容器中而不循环遍历该对象？

Answer 1

您可以使用 DOM API 来完成：

const divElement= document.createElement('div');
divElement.className = 'mfp-nav';
divElement.appendChild(
  arrowLeft.add(arrowRight)
);

mfp.container.append(divElement)

Answer 2

arrowLeft

和

arrowRight

不是 HTML 字符串，它们是 DOM 元素，因此您不能将它们与其他 HTML 连接起来。创建 DOM 元素。

let div = document.createElement('div');
div.classList.add('mfp-nav');
div.append(arrowLeft.add(arrowRight));
mfp.container.append(div);