Image based on the content of a div

Question

I need to display an image based on the content of a div. The tag already exists and I need to discard the one that was loaded and replace it with the new tag with the image in question.

Let me give you an example, the site bears the artist’s name and the album cover, which is generated dynamically from an external site, for example:

<div class="ccartist">A Flock of Seagulls</div>
<div class="cover"><img src="blabla.bla/12345.jpg"></div>

I wanted to delete this img tag loaded by another page by following the parameters:

<div class="cover"><img src="patch/to/covers/{conteúdo da div ccartist}.jpg"></div>

Resulting in:

<div class="cover"><img src="patch/to/covers/A Flock of Seagulls.jpg"></div>

How I would do this using javascript/jquery?

Thank you!

Answer 1

The best way to do this would be with Javascript.

Following example:

 <div class="ccartist">A Flock of Seagulls</div>
 <div class="cover"><img src=""></div>

<script>

//iniciando variáveis com o conteúdo de cada classe
var ccartist = document.getElementsByClassName('ccartist');
var cover = document.getElementsByClassName('cover');

//aqui você seta o conteúdo de ccartlist no atributo "src" do cover
cover.setAttribute('src', 'patch/to/covers/' + produtosIntTitulo[0].innerText + '.jpg');

</script> 

you can also use Jquery, which would look like this

<script>
 $(document).ready(function(){
   $('.cover').attr('src','patch/to/covers/' + $('.ccartist').text() + '.jpg');
 });
</script>