将html添加到div而不替换其中的当前内容 [英] Add html to div without replacing the current content in it
本文介绍了将html添加到div而不替换其中的当前内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将 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屋!
查看全文