为什么 jQuery 没有将此 html 字符串转换为 jQuery 对象？

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?

Answer 1

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.

Answer 2

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>

Answer 3

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.