Why is jQuery not turning this html string into a jQuery object?

Question

I have a template string that I need to turn into a jQuery object so I can parse it and fill out the data.

$(function(){

var template = '<h3>Details</h3>' +
    '<ul>' + 
    '<li>Submitted: <span class="submittedTime"></span></li>' + 
    '<li>Submitted by: <span class="submitter"></span></li>' + 
    '<li>Contact Information' +
        '<ul>' +
        '<li>Name: <span class="contactName"></span></li>' +
        '<li>Name: <span class="contactEmail"></span></li>' +
        '</ul>' +
    '</li>';


var t = $(template);

});

When I try to perform a jQuery operation on them (such as .find()), it fails.

Do you have any ideas on what I'm doing wrong?

Not sure if this is the reason but you're not closing yout first `ul`. That could definitively lead to parsing issues — Claudio Redi, Nov 19 '15 at 15:12
I can't reproduce the problem you describe — http://jsbin.com/govibe/1/edit?js,console — How are you testing this? Exactly what code are you using when you call `find()`? What result do you expect to get? — Quentin, Nov 19 '15 at 15:14
"`t` is inheriting the prototype jQuery methods" — That's because it is a jQuery object. jQuery objects include an array of vanilla elements. — Quentin, Nov 19 '15 at 15:15
Possible duplicate of [Creating a jQuery object from a big HTML-string](http://stackoverflow.com/questions/11047670/creating-a-jquery-object-from-a-big-html-string) — R3tep, Nov 19 '15 at 15:16
@Quentin, I know that. But this is not a JQuery object. Or it's not the normal kind in any case. It doesn't have a "selector" or "context' or "prevObject" property. — JakeParis, Nov 19 '15 at 16:02
@JakeParis — That's normal. You didn't generate it from a selector (so it can hardly have a property that tells you what the selector you used to generate it was!) or an existing document. It is still a jQuery object. — Quentin, Nov 19 '15 at 16:04

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

I think it actually is, as per Quinten's comment. Try running this script against an HTML document with a <div class="test"> element:

$(function () {

    var template =
        "<h3>Details</h3>" +
        "<ul>" +
        "<li>Submitted: <span class='submittedTime'></span></li>" +
        "<li>Submitted by: <span class='submitter'></span></li>" +
        "<li>Contact Information" +
        "<ul>" +
        "<li>Name: <span class='contactName'></span></li>" +
        "<li>Name: <span class='contactEmail'></span></li>" +
        "</ul>" +
        "</li>" +
        "</ul>";


    var t = $(template);
    //console.log(t);
    $(t).appendTo(".test");
});

See http://jsfiddle.net/5svLfq4r/ for a demo.

edited May 23 '17 at 12:31

Community

1
1

answered Nov 19 '15 at 15:23

alex

6,818
9
52
103

1

What you're doing in the fiddle doesn't match your code above. – JakeParis Nov 19 '15 at 16:09
Good call. However, both of those code snippets work, and they do the same thing. – alex Nov 19 '15 at 18:02

Alex · Answer 2 · 2015-11-19T15:55:40.927

0

You need to wrap your snippet inside a div element and close your outer ul tag. If you run the snippet below, jQuery will correctly output the HTML. I have converted your template into a multi-line statement to make it easier to read

a = $(function() {

  var template = `
     <div>
        <h3>Details</h3>    
        <ul>
            <li>Submitted: <span class="submittedTime"></span></li>
            <li>Submitted by: <span class="submitter"></span></li>
            <li>
                Contact Information
                <ul>
                    <li>Name: <span class="contactName"></span></li>
                    <li>Name: <span class="contactEmail"></span></li>
                </ul>
            </li>
        </ul>
    </div>`;


  var t = $(template);

  document.write(t.html())

});

a()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Nov 19 '15 at 15:55

answered Nov 19 '15 at 15:27

Alex

21,273
10
61
73

you do not have `` tag – Nov 19 '15 at 15:32
Being unable to reproduce the problem is not an answer. If you can't, then leave a comment. – Quentin Nov 19 '15 at 15:38
@Jaco I didn't know about multi-line strings. Holy crap have you just saved me so much effort!! – JakeParis Nov 19 '15 at 16:05

score -1 · Answer 3 · answered Nov 19 '15 at 15:18

Based on the documentation:

To ensure cross-platform compatibility, the snippet must be well-formed. Tags that can contain other elements should be paired with a closing tag:

So you probably need to close that <ul>.

Also,

If the HTML is more complex than a single tag without attributes, [..] the actual creation of the elements is handled by the browser's .innerHTML mechanism. In most cases, jQuery creates a new element and sets the innerHTML property of the element to the HTML snippet that was passed in.

it may be different on different browsers.

Why is jQuery not turning this html string into a jQuery object?

3 Answers3