Why do jQuery.appendTo()/html()/... create global JavaScript variable automatically?

Question

Sorry if this question is duplicate.

Recently I found jQuery would add global JavaScript variable after calling functions passing with DOM id, such as $('<div id="foo" />').appendTo() / $.html('<p id="bar" />). The variable is pointed to the DOM object with the same id, shown as these lines:

<body>
    <div id="container"></div>
    <!-- include jquery.js -->
    <script>
         typeof(foo);                                          // "undefined"
         typeof(bar);                                          // "undefined"

         $('<div id="foo"></div').appendTo('#container');
         $('#foo').html('<div id="bar"></div>');

         typeof(foo);                                          // "object"
         typeof(bar);                                          // "object"

         foo instanceof HTMLDivElement;                        // true
         bar instanceof HTMLDivElement;                        // true

         foo === $('#foo')[0];                                 // true
    </script>
</body>

Is this feature introduced in the API documentation? What happens exactly?

Regards!

jQuery isn't doing this, the browser is. In some browsers, the element can be selected by `window.[elementId]` - which is happening here, example: https://jsfiddle.net/k7x4adu1/ — Rory McCrossan, Jun 13 '16 at 07:34

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

0

Thanks to @RoryMcCrossan, it is not related to jQuery.

<script>
    var x = document.createElement("div");
    x.setAttribute('id', 'bar');
    document.body.appendChild(x);
    window.bar instanceof HTMLDivElement;  // true
</script>

See more details to this question Do DOM tree elements with ids become global variables?

edited May 23 '17 at 12:16

Community

1
1

answered Jun 13 '16 at 07:59

IronBlood

165
5

Why do jQuery.appendTo()/html()/... create global JavaScript variable automatically?

1 Answers1