How to replace a piece of Html code with another one using Jquery?

Question

css

<div id="camera" class="camera_wrap">
                
        <div data-src="images/slide1.jpg">

                </div>
                <div data-src="images/slide2.jpg">

                </div>
                <div data-src="images/slide3.jpg">

                </div>

For example, images/slide1.jpg should be replaced with images/slide1_small.jpg

Answer 1

https://jsfiddle.net/vjLL124o/1/

Answer 2

$('[data-src=images/slide1.jpg]').attr('data-src',' images/slide1_small.jpg')

something like that, wrote from memory

Answer 3

$(document).ready(function(){
    	if ($(document).width() < 450){
        		$('#camera div:first').remove;
        		$('<div data-src="images/slide1_small.jpg"></div>').insertBefore('#camera div:first');
    	}
});

It seems like something like that. We check the width of the window, if it is less than 450 - delete the first child div of the block with id="Camera", then add the html code before the first (remaining) child block.
You can bring it to mind by implementing exactly the replacement, like Ilya Beloborodov , but I myself still don’t understand enough.