Question 301195 in Javascript Question posted in
A very good W3school tutorial can be found here.

JavaScript – wrap an object in an html container before appending

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?

Tags:

2

Answers


  1. 0

    You can do it using DOM API:

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

mfp.container.append(divElement)
    Login or Signup to reply.
  2. 0

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search