I am using a popup lightbox plugin, the plugin generates next/prev buttons but it doesn’t put them in a container. I would like to wrap them in a containing element and have found the spot in the plugin where they are generated but I can’t figure out how to wrap them since they are generated as an object.
This is what the default code for button generation looks like:
mfp.container.append(arrowLeft.add(arrowRight));
Before adding them to the container I would like to wrap them in a div with the class mfp-nav. I tried the following, but it’s not working since the buttons are an object.
mfp.container.append('<div class="mfp-nav">' + arrowLeft.add(arrowRight) + '</div>');
On the front-end this ends up looking like this:
<div class="mfp-nav">[object Object]</div>
Is there an easy way to wrap this object in a container without looping over the object?
>Solution :
arrowLeft and arrowRight are not HTML strings, they’re DOM elements, so you can’t just concatenate them with other HTML. Create the DOM elements.
let div = document.createElement('div');
div.classList.add('mfp-nav');
div.append(arrowLeft.add(arrowRight));
mfp.container.append(div);