23

I tried the following:

$.load("Views/chatBox.html").appendTo('body')

Console Output:

TypeError: $.load is not a function

EDIT: The answer should only be one line of code; that's enough, I think.

Sean Mickey
  • 7,618
  • 2
  • 32
  • 58
omg
  • 136,412
  • 142
  • 288
  • 348

5 Answers5

83

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'
});
Rob Evans
  • 6,750
  • 4
  • 39
  • 56
  • 9
    +1, this exactly appends the content to BODY, thx for sharing! – Igor Dec 30 '11 at 00:37
  • I have small datepicker that show the current date and the next day. I used what you wrote, but having problem, the problem is that the data is not update, but when I refresh the page it update. I using wordpress and plugin allow to run jQuery. – hanan-mstudio Aug 28 '14 at 07:40
  • @hanan-mstudio That seems like a whole other question and probably not related at all to the answer I gave. Can you post a new question? – Rob Evans Jan 21 '15 at 13:20
  • 1
    Why is this down here when this seems to be the correct answer. – Akalanka Oct 19 '17 at 04:24
  • wohoo .. so nice, quick 'n tidy :) maybe use .html(data) instead of append()? – Grashopper Dec 16 '19 at 22:08
9

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... :)

Gavrisimo
  • 1,827
  • 5
  • 25
  • 33
  • So,Must jQuery bother some element to do ajax things? – omg Sep 06 '09 at 13:51
  • Well you must always have some selector onto which something will be done. Some demo page or code would help in understanding what you want, but that previus answer is, i think, what you need. :) – Gavrisimo Sep 06 '09 at 14:01
3

An alternative solution:

jQuery('#AppendToMe').append( jQuery('<div>').load(...) );

This will append whatever you load into the #AppendToMe element.

Kirill Fuchs
  • 13,446
  • 4
  • 42
  • 72
1

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?

waffles
  • 41
  • 2
-1

Here you go:

<script type="text/javascript">
    $(function() {
        $("body").load("Views/chatBox.html");
    });
</script>
Gavrisimo
  • 1,827
  • 5
  • 25
  • 33
  • "Load HTML from a remote file and inject it into the DOM." So you just need some selector into which injection will be done. ;) Aka - yes, load does the work of appending. Check out that demo i made and posted and that tutorial, it helped me a lot. – Gavrisimo Sep 06 '09 at 13:26
  • 3
    Oh,no,it will replace the whole page with Views/chatBox.html,which is not what I desired.I need to append it to . – omg Sep 06 '09 at 13:28
  • Well what i am doing is having some container, in that demo it is #majice, and it is empty. Then i load external page into that. Makes sense? – Gavrisimo Sep 06 '09 at 13:32
  • Not exactly the same as what I desired.My case:1.no container 2.get html by ajax and append it to – omg Sep 06 '09 at 13:36
  • If there is a container,I can do this:$('#container').load(...).appendTo('body').Right?But I need to implement it without container. – omg Sep 06 '09 at 13:38