将html添加到div而不替换其中的当前内容 [英] Add html to div without replacing the current content in it

问题描述

我正在尝试将 dhtml 添加到 ID 为 upload_results 的 div.这应该可以在不替换 div 中的当前内容的情况下工作.

I'm trying to add dhtml to the div with the id upload_results. That should work without replacing the current content in the div.

代码:(有趣的部分在底部)

The Code: (interesting part is at the bottom)

<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-->

推荐答案

To 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，破坏现有的侦听器和先前附加到元素的数据.

You could also use .innerHTML += '[...]'; but that's usually considered bad practice as it overwrites existing DOM, trashing out existing listeners and data previously attached to the elements.

这篇关于将html添加到div而不替换其中的当前内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！