Ajouter html à div sans remplacer le contenu actuel

Question

J'essaie d'ajouter dhtml à la div avec l'ID upload_results. Cela devrait fonctionner sans remplacer le contenu actuel dans le div.

Le code: (partie intéressante est au fond)

<script language="JavaScript"> 
function do_show() { 
     $("#webcamContainer").fadeIn(''); 
    } 

    webcam.set_hook('onComplete', 'my_completion_handler'); 

    function do_upload() { 
     upload to server 
     document.getElementById('upload_results').innerHTML = '<div>Uploading...</div>'; 
     webcam.upload(); 
    } 

    function my_completion_handler(msg) { 
     extract URL out of PHP output 
     if (msg.match(/(http\:\/\/\S+)/)) { 
      var image_url = RegExp.$1; 
      show JPEG image in page 
      $("#upload_results").fadeIn(''); 
      //document.getElementById('upload_results').innerHTML = '<a target="_blank" href="'+image_url+'"><img style="border:#ccc 5px solid;" src="'+image_url+'" width="100px"></a>';// I think here should be something changed 
    $('#upload_results').append('<a target="_blank" href="'+image_url+'"><img style="border:#ccc 5px solid;" src="'+image_url+'" width="100px"></a>');  
      reset camera for another shot 
      webcam.reset(); 
     } 
     else alert("PHP Error: " + msg); 
    } 
</script> 


<div id="upload_results" class="video_header" style="display:none;"></div><!--add data here , without replace current content in div--> 

Answer 1

Pour append contenu à l'élément #upload_results:

$('#upload_results').append('<a target="_blank" href="'+image_url+'"><img style="border:#ccc 5px solid;" src="'+image_url+'" width="100px"></a>'); 

Vous pouvez également utiliser .innerHTML += '[...]'; mais qui est généralement considéré comme une mauvaise pratique comme écrase le DOM existant, détruit les écouteurs existants et les données précédemment attachées aux éléments.

Answer 2

départ: insertAdjacentHTML méthode:

https://developer.mozilla.org/en-US/docs/DOM/element.insertAdjacentHTML