Как изменить исходный URL-адрес изображения, динамически добавленного в div?

Question

У меня есть div, в котором я динамически добавляю изображение.

div.append('<img class="prod48" src="' + url + '" />'); 

Теперь url устанавливается focusout из текстового поля в зависимости от текста в нем. Поскольку функция append будет добавляться, как я должен просто изменить этот url и не добавлять другое изображение в div? В первый раз, когда вызывается focusout, я должен иметь возможность добавлять и восстанавливать время обновления URL-адреса.

Answer 1

Если вы хотите обновить элемент изображения после его добавления в документ, вам нужно будет каким-то образом ссылаться на него.

Несколько идей приходят на ум сразу:

1. Дайте изображению уникальный идентификатор, а затем использовать это:

   # First, change the html to include an id 
   div.append('<img id="abcdef1234" class="prod48" src="' + url + '" />'); 
   
   #... 
   # Later, grab the image by its id and change the source url 
   var img = document.getElementById('abcdef1234'); 
   img.src = newUrl; 
   

2. С другой стороны, построить изображение динамически в первый раз, и сохранить элемент в переменной:

   # First, create an element, and hold it in a variable: 
   var img = document.createElement('img'); 
   img.className = "prod48"; 
   img.src = url; 
   # Now append it to the div: 
   div.append(img); 
   
   #... 
   # Later, we still have that element, so we can just change the source URL: 
   img.src = newUrl; 
   

Answer 2

предоставить идентификатор для изображения и этот код может помочь вам ..

$("img").attr("src", "/img/circleGraph/circle"); 

Answer 3

Если вы используете JQuery вы могли бы сделать что-то вроде этого:

var div = $('div'); 

div.append("<img src='"+url+"' />"); 

div.find("img").attr("src", newUrl); 

Answer 4

HTML:

<input type="text" id="url"> 
<div id="image_div"> 
    Will append image tag to this :  
</div> 

JQUERY:

$(document).ready(function(){ 
$('#image_div').html("<img src='' class='prod48'>");  //will replace image 
    $('#url').change(function(){   
     $('.prod48').attr('src',$('#url').val()); 
    }); 
}); 

JSFiddle: here