javascript – 将html添加到div而不替换其中的当前内容
作者:互联网
我正在尝试使用id upload_results将dhtml添加到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-->
解决方法:
到#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,摧毁现有的侦听器和先前附加到元素的数据.
标签:jquery,javascript,dhtml 来源: https://codeday.me/bug/20190718/1493986.html