How to "copy" text from one div to another with Jquery?

Question

I’m organizing a player to put on my website. As I don’t know much about JS/JQ, I took a simple model on the internet, put together a layout and adjusted the script to my liking as far as I could.

Now I’ve stumbled onto something that I thought was super easy, but I’ve tried it in many ways without success. What I want is to "clone" the text that is in a div (in the case of the name of the song, [currentIndex]) to another div (in the player bar).

Here I am leaving the part of the script that I consider has the possibility to do this so you understand better his logic. Look at my last attempt:

      Carousel.prototype.go_to = function( index, currentIndex )
    {   
if (currentIndex != index) {

    index = index%this.count;
    if (index < 0)
        index = index + this.count;

    this.$.faicha[currentIndex].classList.remove('ativo');
    this.$.faicha[index].classList.add('ativo');

    this.$.musica[0].setAttribute('src', 'som/' + index + '.mp3');

    /*Aqui abaixo minha tentativa*/
    this.$.nomedamusica[0].clone().appendTo(".nomedamusicaaqui");

    this.changeMusic();
    this.index = index;
}
};

.nomedamusica comes from the class where it has the name of the song. And .nomedamusicaaqui is the class of div where the text should be "pasted".

Answer 1

Just take the active element text with the class .ativa (music that is selected) and play inside the other div, using:

`$(".nomedamusicaaqui").text($("div.ativa").text());`
            ↑                         ↑
       div destino         div de onde virá o texto

Example:

var Player = function ( $target )
{
	this.$ = {};
	this.$.body  	    = $target;
	this.$.prev 	 		= this.$.body.find('.prev');
	this.$.next 		    = this.$.body.find('.next');
	this.$.play 		    = this.$.body.find('.play');
	this.$.seek_bar			= this.$.body.find('.seek-bar');
	this.$.progress_bar		= this.$.body.find('.progress-bar');
	this.$.faichas 			= this.$.body.find('.faichas');
	this.$.music			= this.$.body.find('.music');
	this.$.faicha 			= this.$.faichas.find('.faicha');

	this.count = this.$.faicha.length;
	this.init_events();
};

Player.prototype.index = 0;
Player.prototype.count = 0;
Player.prototype.progress_ratio = 0;

Player.prototype.init_events = function (){
	var that = this;
	
	this.$.next.on('click', function(){
		that.next();
		return false;
	});
	this.$.prev.on('click', function(){
		that.prev();
		return false;
	});

	this.changeMusic();

	this.$.play.on('click', function(){
		play = !play;
		that.changeMusic();
		return false;
	});
	
	/* ação quando a música acabar */ 
	this.$.music.bind('ended', function(){
		that.next();
	});

	/**** barra de tempo ****/
	window.setInterval(function () {
		this.progress_ratio = that.$.music[0].currentTime / that.$.music[0].duration;
	    that.$.progress_bar.css({
		  transform: "scaleX(" + progress_ratio + ")"
		});
	}, 50);
	/* Permite alterar a hora atual da música */ 
	this.$.seek_bar.on('click', function (e) {
	        var x = e.clientX - that.$.seek_bar.offset().left,
	        ratio = x / that.$.seek_bar.width(),
	        time = ratio * that.$.music[0].duration;
	    that.$.music[0].currentTime = time;
	});
};

Player.prototype.next = function()
{
	this.go_to( this.index + 1, this.index);
};
Player.prototype.prev = function()
{
	this.go_to( this.index - 1, this.index);
};

Player.prototype.go_to = function( index, currentIndex )
{
   
	if (currentIndex != index) { // Evite recomeçar o áudio clicando na música atual

		index = index%this.count;
		if (index < 0)
			index = index + this.count;
		
		this.$.faicha[currentIndex].classList.remove('ativa');
		this.$.faicha[index].classList.add('ativa');
		/* mudar a fonte da música */
		this.$.music[0].setAttribute('src', 'http://audeficheux.com/projects/carousel/src/medias/' + index + '.mp3');
		
		this.changeMusic();
		this.index = index;

      // LINHA ADICIONADA
      $(".nomedamusicaaqui").text($("div.ativa").text());
	}
};

Player.prototype.changeMusic = function()
{	

	/* Tocar/pausar a música */ 	
	if (play == true) {
		this.$.play[0].classList.add('pausa');
		this.$.music[0].play();
      
      // LINHA ADICIONADA
   	$(".nomedamusicaaqui").text($("div.ativa").text());
   }
	else {
		this.$.play[0].classList.remove('pausa');
		this.$.music[0].pause();
	}
};

var $carousel = new Player( $('body') );
var play = false

body {
  color: #FFFFFF;
  background-color: #212121;
  margin: 0;
  }
  .controls {
  position:fixed;
  bottom:0;
  height: 45px;
  width: 100%;
  }
  .seek-bar {
  position: fixed;
  bottom: 45px;
  width: 100%;
  height: 4px;
  }
  .seek-bar .progress-bar {
  background-color: #1CE8B3;
  width: 100%;
  height: 100%;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  -ms-transform-origin: 0;
  -o-transform-origin: 0;
  transform-origin: 0;
  -webkit-transition: transform 0.2s;
  -moz-transition: transform 0.2s;
  -ms-transition: transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.2s;
  }
  .controls .buttons {
  width: 300px;height: 45px;
  left:0;right:0;
  margin: 0 auto;
  position: relative;
  }
  .controls .play{
  position: absolute;
  width: 50px;height: 50px;
  left:0;right:0;top:0;bottom:0;
  margin: auto;
  }
  .prev {
  position: absolute;
  left: 0;top:0;bottom:0;
  margin:auto;
  width: 45px;height: 45px;
  }
  .next {
  position: absolute;
  right: 0;top:0;bottom:0;margin:auto;
  width: 45px;height: 45px;
  }
  .faichas .faicha{padding: 10px;}
  .faichas .faicha .name{vertical-align: middle;}
  .faicha {background: #212121;}
  .faicha.ativa {background: #111111;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nomedamusicaaqui">
</div>

	<div class="controls">
		<div class="seek-bar"><div class="progress-bar"></div></div>
		<div class="buttons">
				<a class="prev">anterior</a>
				<a class="play">tocar/pausar</a>
				<a class="next">proxima</a>
		</div>
	</div>
	
  	<div class="faichas">		
		<div class="faicha ativa">
			<div class="name">música 1</div>
		</div>
		<div class="faicha">
			<div class="name">música 2</div>
		</div>
		<div class="faicha">
			<div class="name">música 3</div>
		</div>
		<div class="faicha">
			<div class="name">música 4</div>
		</div>
		<div class="faicha">
			<div class="name">música 5</div>
		</div>
		<audio class="music"><source src="http://audeficheux.com/projects/carousel/src/medias/0.mp3" type="audio/mpeg"> Your browser doesn't support video API</audio>
	</div>