Menu
I'm writing tests with QUnit and using $.ajax() to pull in HTML for some of the tests from the the dev site running on my local:
add_elements = function(location, selector) { $.ajax(location, {async: false}).done(function(data) { stor.$els = $(selector, $.parseHTML(data)); stor.$els.appendTo($('body')); }) } Using this function at a certain location, I get the following data passed to my .done() callback:
<!DOCTYPE html> <html lang="en"> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <div id="app-container" class="container-fluid"> <div class="page-header"> <h1> <a href="/">Home</a> <small>Text</small> </h1> </div> <div id="hero-units" class="carousel-inner slide"> <div class="hero-unit home item active"> <h1> Text text text </h1> <p> More text! </p> <div id="app-nav"> <a id="lets-go" class="btn btn-primary btn-large nav-forward" href="/what-up/"> Let's go </a> </div> </div> </div> </div> <script src="/static/js/jquery.js"></script> <script src="/static/js/underscore.js"></script> <script src="/static/js/backbone.js"></script> <script src="/static/js/bootstrap.js"></script> <script src="/static/js/site-fiddle.js"></script> <script src="/static/js/site.js"></script> </body> </html> Everything works if selector is #hero-units or .hero-unit, but $(selector, $.parseHTML(data)) returns nothing if selector is #app-container! And I want a jQuery object for the div#app-container element.
And here is what kills me:
$.parseHTML(data) does contain the div#app-container element. It's just $.parseHTML(data)[7]. $('#app-container', $.parseHTML(data)) is an empty array.$('div', $.parseHTML(data)) includes all the divs inside of div#app-container, but not div#app-container itself.What's going on here? It appears that what's happening is that $ is not looking at any of the top-level elements returned by $.parseHTML(data) or $($.parseHTML(data))), and just their children.
How can I get a jQuery object for div#app-container from this $.parseHTML(data)?
ANSWER
The $(selector, $.parseHTML(data))-style lookup uses $.find. Since I'm looking for an element that's top-level in this jQuery object, I should use $.filter instead. Voila.
841
parseHTML uses native methods to convert the string to a set of DOM nodes, which can then be inserted into the document. These methods do render all trailing or leading text (even if that's just whitespace).
$() = window. jQuery() $()/jQuery() is a selector function that selects DOM elements. Most of the time you will need to start with $() function. It is advisable to use jQuery after DOM is loaded fully.
The html() Method in jQuery is used to set or return the innerHTML content of the selected element. Syntax: It returns the content of first matched element. $(selector).html() It sets the content of matched element.
You need to create a DOM element to append the results of .parseHTML() first so that it creates a DOM tree before jQuery can traverse it and find div#app-container.
var tempDom = $('<output>').append($.parseHTML(str)); var appContainer = $('#app-container', tempDom); I used your example and got it working: http://jsfiddle.net/gEYgZ/
The .parseHTML() function seems to choke on the <script> tags, so I had to remove them.
PS. Obviously <output> is not a real HTML tag, just using it for the example
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
