Develop Reference

How to add class/id to image based on its title or alt

I have this old website that needs some fixes, but they need to be quick.
Now I have this image with
Iam going to change the source with the following code:
$("img").click(function(){
// Change src attribute of image
$(this).attr("src", "images/card-front.jpg");
});
But I cant select the image, since it is dynamic content.
How do I add a class or ID to this image, based on its title or alt?

If it's created dynamically, listen on document.
Also .click() is deprecated. Use .on():
$(document).on("click", '[alt="Schwimmbäder"]', function(){
// Change src attribute of image
$(this).attr("src", "https://via.placeholder.com/200x200");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Click the image:</p>
<img src="unknown" title="Schwimmbäder" alt="Schwimmbäder">

Targetting title and setting a class to an image and then use that new class to handle click events: this is how you can do it...
$('img[title="imgTitle"]').addClass("newClass");
$('.newClass').click(function(){
$(this).attr("src", "https://homepages.cae.wisc.edu/~ece533/images/peppers.png");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img width="250" title="imgTitle" src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" />

How can i replace image ? (JS)

How can i replace image? Tag don't have id.
<img src="URL_1" />
I want replace URL_1 to URL_2
Some solution?

If you know the URL you can use
document.querySelector('img[src="URL_1"]').src = "URL_2";
If you don't know the URL and can use an id this would be it:
<img id="id" src="URL_1" />
document.getElementById("id").src = "URL_2";

Assuming that's the only image in the page you can use the Element.getElementsByTagName() to reference the element, and edit its src property:
document.getElementsByTagName('img')[0].src = 'URL_2'
The Selectors API is more appropriate as you can target the element with more details, using a CSS selector:
document.querySelectorAll('img')[0].src = 'URL_2'

If you can't add an id or a class maybe you can wrap your img tag with a div and use more specificity div .myclass img, last solution I see is if you know URL_1 you can select this img tag by the selector: img[src="URL_1"]

Give it an ID
<img id="img1" src="URL_1" />
Then
document.getElementById('img1').setAttribute('src', 'URL_2');

First of all, give an ID to your image
Html code
<img id="my_image" src="URL_1"/>
Jquery code
$("#my_image").attr("src","URL_2");
Or without using Jquery
document.getElementById("my_image").src="URL_2";

Call image src using jquery

I've got a image inside a div. Below is the current div structure.
<div id="imgHolder">
<img class="smallthumb" src="imgHolder.png">
</div>
How can I call the image using jquery and get the same output as above?
I tried this:
$('#imgHolder').attr("src", "profile.png");
but then the final output is:
<div id="imgHolder" class="smallthumb" src="imgHolder.png"></div>

imgHolder is the ID of the div element so #imgHolder will refer to the div element that is why the src is getting added to the div element.
You need to find the image inside the div so you can use a descendant selector along with the id selector like
$('#imgHolder img').attr("src", "profile.png");
$('button').click(function() {
$('#imgHolder img').attr("src", "//placehold.it/64X64&text=profile");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="imgHolder">
<img class="smallthumb" src="//placehold.it/64X64&text=holder">
</div>
<button>Change</button>

You need to select the img to change the attribute of img.
$('#imgHolder img').attr("src", "profile.png");
As img is the direct child of div, you can also use the children > selector
$('#imgHolder>img').attr("src", "profile.png");
Demo
$('#imgHolder > img').attr('src', 'profile.png');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="imgHolder">
<img class="smallthumb" src="imgHolder.png">
</div>
Update
If you want to add image dynamically:
$('#imgHolder').html('<img src="http://img42.com/kzCbY+" />');
Demo

You can use .find to find any descendants like so :
$('#imgHolder').find('img').attr("src", "profile.png");

how to show an image in another div after clicking the image in jquery

I have an image in my webpage i want when the user click on the image the current image also appear in the other div i have in my web page i am totally confuse please help me out here is my code.
<div id="img"><img src="download1.jpg"></div>
<div><img src="" class="img2"></div>
<img src="download1.jpg" alt="" class="imgs" id="the_id" width="180" height="60" />
<script type="text/javascript">
$(document).ready(function() {
$('.imgs').click(function(){
var idimg = $(this).attr('id');
var srcimg = $(this).attr('src');
alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
$(".img2").attr('src',srcimg);
});
});
</script>

Fiddle
Tried using a fiddle and it works, here is the code which I used.
HTML
<div id="img"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA"></div>
<div><img src="" class="img2"></div>
<div>click me </div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA" alt="" class="imgs" id="the_id" width="180" height="60" />
Jquery
$(document).ready(function() {
$('.imgs').click(function(){
var idimg = $(this).attr('id');
var srcimg = $(this).attr('src');
alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
$(".img2").attr('src',srcimg);
});
});

your code is perfect and will work check out you jquery library that is loaded correctly or not I have not seen any error in your code.

You can achieve this by setting the destination image's src to the same as the img src in the clicked div. Try:
$('.source-img').on('click', function(){
var src = $(this).children('img').attr('src');
$('#destination').children('img').attr('src', src);
});
Check out this jsFiddle.
If you want the images to not have wrappers, then just change the jQuery targetting and leave out the .children(img) part.

If you're looking for a better method, see this JSFiddle
It uses the clone function
$('.imgs').click(function(){
$(this).clone().appendTo('#LoadImageHere').attr('id', 'ClonedImage');
});
It means you don't have an image with an empty src attribute lying around, and you can add attributes to the cloned image as you wish (I added an ID in the example).

If you try width this code or here combination you can get very interesting result.Plz look" . Div element have in self img tag width source image,class "img2". Other image in gallery must have equal id, like is id "the_id". And if we clicking any picture that picture is show in space of div tag. How you can get bouncing effect picture must have equal size. I make combination two div tag where firs have class "img2", and second where is my picture distribute my pictures. With this first code on this page I make nice image gallery. Try and you self, this is not hard.

How to append HTML to images using JQuery?

I am using Galleria and I need to wrap my images that Galleria puts into a slide with a link.
I was going to use this methodology: Give the <img> a bogus title= value and then append a <a> tag around the <img>, drawing the link I need from the title= tag.
This is the code I've got so far.
$("img#gallery").this.title.appendTo("img#gallery") { });
I'm trying to get the script to loop through all of the images and append the html.
I also don't know if I should be using .appendTo or .before and .after

That approach will work. You're looking for the wrap function:
var title = $('#test').attr('title');
$('#test').wrap('<a href="'+title+'" />');
This $.each will let you iterate through a series:
<img src="" class="test" alt="test" title="http://www.google.com" />
<img src="" class="test" alt="test" title="http://www.yahoo.com" />
$.each($(".test"), function() {
var title = $(this).attr('title');
$(this).wrap('<a href="'+title+'" />');
});

You could just listen for a click on the entire thing and then figure out if an image was clicked and if so which image and then change the location object.

Use $.each to iterate through all the images you want to wrap and then use
$('img#gallery').wrap('<a href='whatever'>)
to wrap it. It will automatically close the A tag.