jQuery load HTML into <div>

29,997

Solution 1

You're looking for .load()

Load data from the server and place the returned HTML into the matched element.

Solution 2

Firstly, create an HTML page with this code

<html>
<head>
<title>Hello World Page</title>
</head>
<body>
Hello World
</body>
</html>

Have an iFrame inside a DIV (optional) and change the source of the iFrame to URL using jQuery. The url should point to the page you create above.

function loadIframe(iframeName, url) {
    var $iframe = $('#' + iframeName);
    if ( $iframe.length ) {
        $iframe.attr('src',url);   
        return false;
    }
    return true;
}

Solution 3

using .get() and .html() in jQuery. ex,

$.get(url, function (data) {
   $('.MyContent').html(data);
});
Share:
29,997
Papa De Beau
Author by

Papa De Beau

I am so grateful for the generous souls on here who help others with code. How amazing is that!

Updated on June 07, 2020

Comments

  • Papa De Beau
    Papa De Beau almost 4 years

    Is there a way with jQuery to load Html contents from a url?

    For example:

    <div class="MyContent">
    
    <html>
    <head>
    <title>Hello World Page</title>
    </head>
    <body>
    Hello World
    </body>
    </html>
    
    </div>
    

    Can I replace all of the HTML above in the div with the content from a URL?

  • Phil
    Phil almost 8 years
    My experience is that people tend not to tell you why they down-vote you. You have to learn to guess your own errors, fix them and get good at it. If I were to guess, it would be that you have no example (especially no jsfiddle or Plunker) and you provided a link and links can eventually get broken (despite it being from a popular site).