Hola, estoy trabajando en un proyecto en el que tengo un control deslizante de varias imágenes. Cada imagen debe tener una leyenda.

Obtengo la etiqueta alt de la imagen y la almaceno en una etiqueta p con una leyenda de leyenda: texto.

Luego creé una función que se reproduce cuando cambio de diapositiva. Aquí es donde tengo un problema.

Estoy configurando una variable que obtiene la diapositiva activa y otra que obtiene la leyenda de la diapositiva activa; esto funciona bien. Luego traté de usar la función appendTo() para copiar el contenido de la variable de leyenda a una etiqueta div con una clase de .project__information .

Entiendo que esto no funciona porque no es un elemento DOM, pero he buscado soluciones y realmente no puedo encontrar ninguna.

Aquí está mi código:

 // For each active slide get the alt attribute and store it in <p> $('.is--legend').each(function() { var $this = $(this); $this.append('<p class="legend--text">' + $this.parent().find('img').attr('alt') + '</p>'); }); // Set splide slider var elms = document.getElementsByClassName('splide'); for (var i = 0, len = elms.length; i < len; i++) { var splide = new Splide(elms[i], { type: 'loop', drag: 'free', focus: 'center', perPage: 3, autoWidth: 'true', breakpoints: { 767: { perPage: 1, } } }).mount(); } function slideChange() { // Gets active slide var activeSlide = $(".splide__slide.is-active:not(.splide__slide--clone)"); console.log('Passing through the', activeSlide); // Gets the legend var myLegend = activeSlide.find('.legend--text').text(); console.log('Getting the new', myLegend); myLegend.appendTo('.project__information'); } splide.on("move", function() { slideChange(); }); slideChange();

Si alguien tiene una idea de cómo podría lograr esto, alguna documentación relacionada sobre cómo proceder, hágamelo saber