I tried the following:
$.load("Views/chatBox.html").appendTo('body') is not working!
TypeError: $.load is not a function
EDIT:The answer should be only one line of code,that's enough,I think
I dont understand why placing container at the bottom of body and loading external page into that is not what you need?
What you can try is this:
<script type="text/javascript">
$(function() {
$("#container").load("Views/chatBox.html",function(){
$(this).clone().appendTo("body").remove();
});
});
</script>
But im not 100% sure about this code... :)
Nope, all those answers are incorrect because they rely on having a separate container!
Do this:
$.ajax({
url: "your.html",
success: function (data) { $('body').append(data); },
dataType: 'html'
});
An alternative solution:
jQuery('#AppendToMe').append( jQuery('<div>').load(...) );
This will append whatever you load into the #AppendToMe element.
When I tried out GaVrA's solution I found it could be even simpler:
<script type="text/javascript">
$(function() {
$("#container").load("external.html").appendTo("body");;
});
</script>
I guess appentTo automatically removes a previous instance? Perhaps I'm missing something here?
Here you go:
<script type="text/javascript">
$(function() {
$("body").load("Views/chatBox.html");
});
</script>
来源：https://stackoverflow.com/questions/1385641/how-to-load-some-html-and-append-to-body-with-jquery