如何无需循环将MFP弹窗插件的按钮对象包裹进HTML容器？

我用了一款弹窗灯箱（popup lightbox）插件，它生成的上一页/下一页按钮没被放进容器里。我已经找到插件里生成按钮的代码位置，但按钮是对象形式生成的，不知道怎么把它们包裹进容器。

默认按钮生成代码：

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>

有没有不用循环就能包裹这个对象的简便方法？

你可以先创建带mfp-nav类的jQuery容器对象，把按钮添加进去后再整体插入，不用循环：

// 创建目标容器
const navContainer = $('<div class="mfp-nav"></div>');
// 把按钮添加到容器内
navContainer.append(arrowLeft.add(arrowRight));
// 将容器插入到指定位置
mfp.container.append(navContainer);

也可以写成更简洁的链式调用：

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

之前的写法出错是因为把DOM对象和字符串直接拼接，JS会自动把对象转成[object Object]字符串输出。而用jQuery的DOM操作方法，是把按钮对象作为节点添加到容器对象中，再整体插入页面，就能实现你要的包裹效果。

内容的提问来源于stack exchange，提问作者user19103974