jQuery parseHTML result not as expected

Question

I have HTML in a string from a remote file. Now I want to read some elements with jQuery. The external HTML is here in the string

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="jquery-1.11.1.min.js"></script>
        <script>
            $(document).ready(function() {

                var htmlString = '<!DOCTYPE html>' +
                        '<html>' +
                        '<head>' +
                        '<meta name="firstName" content="false">' +
                        '</head>' +
                        '<body>' +
                        '<div id="test1" class="test1" name="test1">test2</div>' +
                        '<div id="test2" class="test2" name="test2">test2</span>' +
                        '</body>' +
                        '</html>';

                var $ = jQuery;
                var html = $.parseHTML(htmlString);
                //var html = htmlString;

                var test1 = $("#test1", $(html)).attr("name");
                var test2 = $(html).find("div[class='test2']").attr("name");
                var test3 = $(html).attr("name");

                console.log(html);
                console.log('1: ' + test1); //undefined
                console.log('2: ' + test2); //undefined
                console.log('3: ' + test3); //firstName

            });
        </script>
    </head>
    <body>
    </body>
</html>

can someone explain to me why I can not select an item?

adeneo · Accepted Answer · 2014-08-28 20:05:57Z

2

$.parseHTML parses out the head and body tags as they are generally not wanted when you insert something into a DOM that already has a head and body tag, so you end up with an array looking like

[meta, div#test1.test1, div#test2.test2]

containing the meta tag and the two div's.

As the div's are now root elements, they are not children of anything, so using jQuery's find() won't work, as it only finds descendant elements.

Using filter() however will work

$(html).filter('.test2').attr("name");

or if you're unsure of wether the elements are root elements or children of some element, you can append the array of elements to a wrapper element, and then use find()

$('<div />', {html : html}).find('.test2').attr('name');

FIDDLE

answered Aug 28, 2014 at 20:05

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Collectives™ on Stack Overflow

jQuery parseHTML result not as expected

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related