현재 내용을 바꾸지 않고 div에 html을 추가하십시오.

Question

upload_results로 div에 dhtml을 추가하려고합니다. 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

#upload_results 요소에 대한 내용 append에 (흥미로운 부분은 하단에) :

$('#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