How do I load html into a variable with jquery

Question

I know I can load in html in to a div with:

$("#my_div").load("http://www.mypage.com");

but I want to do is load html into a variable like:

my_var = load("http://www.mypage.com");

Any help is great.

I would like to loop though some items like:

HLS.functions.LoadSideModules = function() {
    HLS.sideModuleContent = new Object();
    for(var i = 0; i < HLS.currentModuleConfig.POLICIES.POLICY.length; i++) {
        for(var y = 0; y < HLS.currentModuleConfig.POLICIES.POLICY[i].PAGES.PAGE.length; y++) {
            for(var POS in HLS.currentModuleConfig.POLICIES.POLICY[i].PAGES.PAGE[y]) {
                var item = HLS.currentModuleConfig.POLICIES.POLICY[i].PAGES.PAGE[y][POS];
                if(!HLS.sideModuleContent[item]) {
                    HLS.sideModuleContent[item] = j.get(HLS.config.K2GETMODULE + HLS.currentModuleConfig.POLICIES.POLICY[i].PAGES.PAGE[y][POS]);
                }
            }
        }
    }
};

jkoop · Accepted Answer · 2020-07-17 23:53:32Z

88

$.get("http://www.mypage.com", function( my_var ) {
    // my_var contains whatever that request returned
});

Underneath, jQuery will launch an ajax request which fires to the given URL. It also tries to intelligently guess which data is going to be received (if it's valid html you don't need to specify). If you need to get another data type just pass that in as last argument, for instance

$.get("http://www.mypage.com", function( my_var ) {
    // my_var contains whatever that request returned
}, 'html');  // or 'text', 'xml', 'more'

Reference: http://api.jquery.com/jQuery.get/

edited Jul 17, 2020 at 23:53

jkoop

1291 silver badge10 bronze badges

answered Mar 31, 2012 at 18:00

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dariux Over a year ago

It works for me, but shows error in console after load: "Uncaught SyntaxError: Unexpected token <" . Any idea why?

intersum Over a year ago

@Darius.V it's been some time since you asked this question but for others who may have come across this problem - you probably put <script> tag in console. Remove it and it should work.

gang · Accepted Answer · 2013-04-30 18:52:08Z

43

You could also create an element in memory and use load() on it:

var $div = $('<div>');

$div.load('index.php #somediv', function(){
    // now $(this) contains #somediv
});

The advantage is that you can specify which part of index.php you want to load by using a selector ( #somediv )

edited Apr 30, 2013 at 18:52

answered Apr 30, 2013 at 18:44

gang

1,8202 gold badges24 silver badges37 bronze badges

Comments

sharhp · Accepted Answer · 2016-08-15 10:06:35Z

While creating a new element is one option, you could also clone any element. This copies all the attributes and the values of the old Node, as it says, 'exact clone'.

In case you want only a particular section of the html to be copied, this also provides the flexibility to fill all the contents within the particular element hierarchy (i.e., with all the children included) from the fetched page.

For instance, if the hierarchy is -

<div id='mydiv'>
    <div>
        <span>
        ...</span>
    </div>
</div>

//...

var oldElement = document.getElementById('mydiv');
var newElement = oldElement.cloneNode(true);

/* #selector selects only that particular section & the '> *' enables to copy all of the child nodes under the parent #selector
Replace URL with the required value
function specification is optional... */

jQuery(newElement).load(URL+'#selector > *'[,function(response, status, xhr){}]);

//...

Now you can programatically process the variable newElement as you want (using native javascript as well, since it is a native element).

Ahmed Elazazy · Accepted Answer · 2016-10-18 16:37:51Z

2

    function includeHTML_callBack(result){
        var my_var = result;
    }

    function includeHTML(link, callBack) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                callBack(this.responseText);
            }
          }      
          xhttp.open("GET", link, true);
          xhttp.send();
          return;
    }

    includeHTML("http://www.mypage.com", includeHTML_callBack);

answered Oct 18, 2016 at 16:37

Ahmed Elazazy

5046 silver badges11 bronze badges

Comments

yurenchen · Accepted Answer · 2023-05-11 09:23:42Z

0

nowadays modern browser has a fetch api,
which can do sync or async style call.

sync style call:

var resp = await fetch(the_url)
var text = await resp.text()

NOTE: await is only valid in async functions and the top level bodies of modules

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/en-US/docs/Web/API/Response/text
https://stackoverflow.com/a/41946517/4896468

edited May 11, 2023 at 9:23

answered May 11, 2023 at 9:18

yurenchen

2,77429 silver badges24 bronze badges

Collectives™ on Stack Overflow

How do I load html into a variable with jquery

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related