將html添加到div而不替換當前的內容

Question

我正在嘗試將div添加到id爲upload_results的div中。這應該沒有替換div中的當前內容。

守則：（有趣的部分是在底部）

<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

要append內容到#upload_results元素：

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

你也可以使用.innerHTML += '[...]';但是這通常被認爲是不好的做法，因爲它覆蓋現有的DOM，將現有的監聽器和之前附加到元素上的數據剔除掉。

Answer 2

退房：insertAdjacentHTML方法：

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