How to change image and change class name using javascript?

Question

How to change image and change class name using javascript ?

I try with my code but not work, What is wrong?

this code will

1. change class name from .black to .red

2. change element from

   <div id="abcd" style=" border-radius: 3px; border: 1px solid #ccc; padding: 10px;"> <img src="https://0.s3.envato.com/files/122605825/thumb.png"/> </div>

to

<div id="abcd" style=" border-radius: 3px; border: 1px solid #ccc; padding: 10px;">
    <img src="https://0.s3.envato.com/files/118176445/thumbnail.png"/>
</div>

http://jsfiddle.net/28L8yk79/1/

javascript code

<script>
function test_fn() {           
    $('#12345-6).html('<div id="abcd" style=" border-radius: 3px; border: 1px solid #ccc; padding: 10px;"><img src="https://0.s3.envato.com/files/118176445/thumbnail.png"/></div>').addClass('red').removeClass('black');    
}
</script>

Please solve me by using like my code. thank you

Answer 1

Try this:

<script>
function test_fn() {    
    $('#12345-6')
          .removeClass('black')
          .addClass('red')
          .find('#abcd img')
               .attr('src', 'https://0.s3.envato.com/files/118176445/thumbnail.png');
}
</script>

https://jsfiddle.net/28L8yk79/15/

Answer 2

your missing an ' in the selector :

<script>
function test_fn() {           
    $('#12345-6').html('<div id="abcd" style=" border-radius: 3px; border: 1px solid #ccc; padding: 10px;"><img src="https://0.s3.envato.com/files/118176445/thumbnail.png"/></div>').addClass('red').removeClass('black');    
}
</script>

Answer 3

see updated fiddle . missing an ' in the selector

function test_fn() {           
     $('#12345-6').html('<div id="abcd" style=" border-radius: 3px; border: 1px solid #ccc; padding: 10px;"><img src="https://0.s3.envato.com/files/118176445/thumbnail.png"/></div>').addClass('red').removeClass('black');    
}

Answer 4

As @Beamer said, I would use something more practical. You don't need to inject html again, just modified your one.

function test_fn() {           
var imageUrl = 'https://0.s3.envato.com/files/118176445/thumbnail.png'
$('#12345-6').addClass('red').removeClass('black').find('img:first').attr('src', imageUrl);

}