Skip to content

Commit 500f05e

Browse files
mattlunnkswedberg
authored andcommitted
jQuery(): Document change in jQuery( html ) behavior as of 1.9. Minor style fixes. Closes jquery#531
1 parent d408dd2 commit 500f05e

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

entries/jQuery.xml

+8-8
Original file line numberDiff line numberDiff line change
@@ -173,8 +173,8 @@ $( myForm.elements ).hide();
173173
<p>If a string is passed as the parameter to <code>$()</code>, jQuery examines the string to see if it looks like HTML (i.e., it starts with <code>&lt;tag ... &gt;</code>). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements. You can perform any of the usual jQuery methods on this object:</p>
174174
<pre><code>$( "&lt;p id='test'&gt;My &lt;em&gt;new&lt;/em&gt; text&lt;/p&gt;" ).appendTo( "body" );</code></pre>
175175
<p>For explicit parsing of a string to HTML, use the <a href="/jQuery.parseHTML/">$.parseHTML()</a> method.</p>
176-
<p>By default, elements are created with an <code>ownerDocument</code> matching the document into which the jQuery library was loaded. Elements being injected into a different document should be created using that document, e.g., <code>$("&lt;p&gt;hello iframe&lt;/p&gt;", $("#myiframe").prop("contentWindow").document)</code>.</p>
177-
<p>If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's <code>innerHTML</code> mechanism. In most cases, jQuery creates a new &lt;div&gt; element and sets the innerHTML property of the element to the HTML snippet that was passed in. When the parameter has a single tag (with optional closing tag or quick-closing) — <code>$( "&lt;img&#xA0;/&gt;" )</code> or <code>$( "&lt;img&gt;" )</code>, <code>$( "&lt;a&gt;&lt;/a&gt;" )</code> or <code>$( "&lt;a&gt;" )</code> — jQuery creates the element using the native JavaScript <code>createElement()</code> function.</p>
176+
<p>By default, elements are created with an <code>.ownerDocument</code> matching the document into which the jQuery library was loaded. Elements being injected into a different document should be created using that document, e.g., <code>$("&lt;p&gt;hello iframe&lt;/p&gt;", $("#myiframe").prop("contentWindow").document)</code>.</p>
177+
<p>If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's <code>.innerHTML</code> mechanism. In most cases, jQuery creates a new &lt;div&gt; element and sets the innerHTML property of the element to the HTML snippet that was passed in. When the parameter has a single tag (with optional closing tag or quick-closing) — <code>$( "&lt;img&#xA0;/&gt;" )</code> or <code>$( "&lt;img&gt;" )</code>, <code>$( "&lt;a&gt;&lt;/a&gt;" )</code> or <code>$( "&lt;a&gt;" )</code> — jQuery creates the element using the native JavaScript <code>.createElement()</code> function.</p>
178178
<p>When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, jQuery uses the browser's <code>.innerHTML</code> property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as <code>&lt;html&gt;</code>, <code>&lt;title&gt;</code>, or <code>&lt;head&gt;</code> elements. As a result, the elements inserted may not be representative of the original string passed.</p>
179179
<p>Filtering isn't, however, limited to these tags. For example, Internet Explorer prior to version 8 will also convert all <code>href</code> properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate <a href="http://code.google.com/p/html5shiv/">compatibility layer</a>.</p>
180180
<p>To ensure cross-platform compatibility, the snippet must be well-formed. Tags that can contain other elements should be paired with a closing tag:</p>
@@ -184,14 +184,14 @@ $( myForm.elements ).hide();
184184
$( "&lt;img&gt;" );
185185
$( "&lt;input&gt;" );
186186
</code></pre>
187-
<p>When passing HTML to <code>jQuery()</code>, please also note that text nodes are not treated as DOM elements. With the exception of a few methods (such as <code>.content()</code>), they are generally otherwise ignored or removed. E.g:</p>
187+
<p>When passing HTML to <code>jQuery()</code>, note that text nodes are not treated as DOM elements. With the exception of a few methods (such as <code>.content()</code>), they are generally ignored or removed. E.g:</p>
188188
<pre><code>
189-
var el = $( "1&lt;br&gt;2&lt;br&gt;3" ); // returns [&lt;br&gt;, "2", &lt;br&gt;]
190-
el = $( "1&lt;br&gt;2&lt;br&gt;3 &gt;" ); // returns [&lt;br&gt;, "2", &lt;br&gt;, "3 &amp;gt;"]
189+
var el = $( "&lt;br&gt;2&lt;br&gt;3" ); // returns [&lt;br&gt;, "2", &lt;br&gt;]
190+
el = $( "&lt;br&gt;2&lt;br&gt;3 &gt;" ); // returns [&lt;br&gt;, "2", &lt;br&gt;, "3 &amp;gt;"]
191191
</code></pre>
192-
<p>This behavior is expected. </p>
193-
<p>As of jQuery 1.4, the second argument to <code>jQuery()</code> can accept a plain object consisting of a superset of the properties that can be passed to the <a href="/attr/">.attr()</a> method.</p>
194-
<p><strong>Important:</strong> If the second argument is passed, the HTML string in the first argument must represent a a simple element with no attributes. <strong>As of jQuery 1.4</strong>, any <a href="/category/events/">event type</a> can be passed in, and the following jQuery methods can be called: <a href="/val/">val</a>, <a href="/css/">css</a>, <a href="/html/">html</a>, <a href="/text/">text</a>, <a href="/data/">data</a>, <a href="/width/">width</a>, <a href="/height/">height</a>, or <a href="/offset/">offset</a>.</p>
192+
<p>This behavior is expected. <strong>As of jQuery 1.9.0</strong> (and unless using the <a href="https://github.com/jquery/jquery-migrate/#readme">jQuery Migrate plugin</a>), <code>jQuery()</code> requires the HTML string to start with a <code>&lt;</code> (i.e text nodes cannot appear at the front of the HTML string).</p>
193+
<p><strong>As of jQuery 1.4</strong>, the second argument to <code>jQuery()</code> can accept a plain object consisting of a superset of the properties that can be passed to the <a href="/attr/">.attr()</a> method.</p>
194+
<p><strong>Important:</strong> If the second argument is passed, the HTML string in the first argument must represent a simple element with no attributes. <strong>As of jQuery 1.4</strong>, any <a href="/category/events/">event type</a> can be passed in, and the following jQuery methods can be called: <a href="/val/">val</a>, <a href="/css/">css</a>, <a href="/html/">html</a>, <a href="/text/">text</a>, <a href="/data/">data</a>, <a href="/width/">width</a>, <a href="/height/">height</a>, or <a href="/offset/">offset</a>.</p>
195195
<p><strong>As of jQuery 1.8</strong>, any jQuery instance method (a method of <code>jQuery.fn</code>) can be used as a property of the object passed to the second parameter:</p>
196196
<pre><code>
197197
$( "<div></div>", {

0 commit comments

Comments
 (0)