Skip to content

Commit 8b21f88

Browse files
agcolomscottgonzalez
agcolom
authored and
scottgonzalez
committed
Code indentation and formatting (b entries).
1 parent 701567c commit 8b21f88

File tree

4 files changed

+229
-135
lines changed

4 files changed

+229
-135
lines changed

‎entries/before.xml

+61-24
Original file line numberDiff line numberDiff line change
@@ -26,63 +26,100 @@
2626
</signature>
2727
<desc>Insert content, specified by the parameter, before each element in the set of matched elements.</desc>
2828
<longdesc>
29-
<p>The <code>.before()</code> and <code><a href="/insertBefore">.insertBefore()</a></code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With<code> .before()</code>, the selector expression preceding the method is the container before which the content is inserted. With <code>.insertBefore()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted before the target container.</p>
29+
<p>The <code>.before()</code> and <code><a href="/insertBefore">.insertBefore()</a></code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With <code>.before()</code>, the selector expression preceding the method is the container before which the content is inserted. With <code>.insertBefore()</code>, on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted before the target container.</p>
3030
<p>Consider the following HTML:</p>
31-
<pre><code>&lt;div class="container"&gt;
31+
<pre><code>
32+
&lt;div class="container"&gt;
3233
&lt;h2&gt;Greetings&lt;/h2&gt;
3334
&lt;div class="inner"&gt;Hello&lt;/div&gt;
3435
&lt;div class="inner"&gt;Goodbye&lt;/div&gt;
35-
&lt;/div&gt;</code></pre>
36+
&lt;/div&gt;
37+
</code></pre>
3638
<p>You can create content and insert it before several elements at once:</p>
37-
<pre><code>$('.inner').before('&lt;p&gt;Test&lt;/p&gt;');</code></pre>
39+
<pre><code>
40+
$( ".inner" ).before( "&lt;p&gt;Test&lt;/p&gt;" );
41+
</code></pre>
3842
<p>Each inner <code>&lt;div&gt;</code> element gets this new content:</p>
39-
<pre><code>&lt;div class="container"&gt;
43+
<pre><code>
44+
&lt;div class="container"&gt;
4045
&lt;h2&gt;Greetings&lt;/h2&gt;
4146
&lt;p&gt;Test&lt;/p&gt;
4247
&lt;div class="inner"&gt;Hello&lt;/div&gt;
4348
&lt;p&gt;Test&lt;/p&gt;
4449
&lt;div class="inner"&gt;Goodbye&lt;/div&gt;
45-
&lt;/div&gt;</code></pre>
50+
&lt;/div&gt;
51+
</code></pre>
4652
<p>You can also select an element on the page and insert it before another:</p>
47-
<pre><code>$('.container').before($('h2'));</code></pre>
53+
<pre><code>
54+
$( ".container" ).before( $( "h2" ) );
55+
</code></pre>
4856
<p>If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved before the target (not cloned):</p>
49-
<pre><code>&lt;h2&gt;Greetings&lt;/h2&gt;
57+
<pre><code>
58+
&lt;h2&gt;Greetings&lt;/h2&gt;
5059
&lt;div class="container"&gt;
5160
&lt;div class="inner"&gt;Hello&lt;/div&gt;
5261
&lt;div class="inner"&gt;Goodbye&lt;/div&gt;
53-
&lt;/div&gt;</code></pre>
62+
&lt;/div&gt;
63+
</code></pre>
5464
<p>If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.</p>
5565
<p>In jQuery 1.4, <code>.before()</code> and <code>.after()</code> will also work on disconnected DOM nodes:</p>
56-
<pre><code>$("&lt;div/&gt;").before("&lt;p&gt;&lt;/p&gt;");</code></pre>
66+
<pre><code>
67+
$( "&lt;div/&gt;" ).before( "&lt;p&gt;&lt;/p&gt;" );
68+
</code></pre>
5769
<p>The result is a jQuery set that contains a paragraph and a div (in that order).</p>
5870
<h4 id="additional-arguments">Additional Arguments</h4>
5971
<p>Similar to other content-adding methods such as <code><a href="http://api.jquery.com/prepend/">.prepend()</a></code> and <code><a href="http://api.jquery.com/after/">.after()</a></code>, <code>.before()</code> also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.</p>
6072
<p>For example, the following will insert two new <code>&lt;div&gt;</code>s and an existing <code>&lt;div&gt;</code> before the first paragraph:</p>
61-
<pre><code>var $newdiv1 = $('&lt;div id="object1"/&gt;'),
62-
newdiv2 = document.createElement('div'),
63-
existingdiv1 = document.getElementById('foo');
73+
<pre><code>
74+
var $newdiv1 = $( "&lt;div id='object1'/&gt;" ),
75+
newdiv2 = document.createElement( "div" ),
76+
existingdiv1 = document.getElementById( "foo" );
6477

65-
$('p').first().before($newdiv1, [newdiv2, existingdiv1]);
78+
$( "p" ).first().before( $newdiv1, [ newdiv2, existingdiv1 ] );
6679
</code></pre>
67-
<p>Since <code>.before()</code> can accept any number of additional arguments, the same result can be achieved by passing in the three <code>&lt;div&gt;</code>s as three separate arguments, like so: <code>$('p').first().before($newdiv1, newdiv2, existingdiv1)</code>. The type and number of arguments will largely depend on how you collect the elements in your code.</p>
80+
<p>Since <code>.before()</code> can accept any number of additional arguments, the same result can be achieved by passing in the three <code>&lt;div&gt;</code>s as three separate arguments, like so: <code>$( "p" ).first().before( $newdiv1, newdiv2, existingdiv1 )</code>. The type and number of arguments will largely depend on how you collect the elements in your code.</p>
6881
</longdesc>
6982
<example>
7083
<desc>Inserts some HTML before all paragraphs.</desc>
71-
<code><![CDATA[$("p").before("<b>Hello</b>");]]></code>
72-
<css><![CDATA[p { background:yellow; }]]></css>
73-
<html><![CDATA[<p> is what I said...</p>]]></html>
84+
<code><![CDATA[
85+
$( "p" ).before( "<b>Hello</b>" );
86+
]]></code>
87+
<css><![CDATA[
88+
p {
89+
background: yellow;
90+
}
91+
]]></css>
92+
<html><![CDATA[
93+
<p> is what I said...</p>
94+
]]></html>
7495
</example>
7596
<example>
7697
<desc>Inserts a DOM element before all paragraphs.</desc>
77-
<code><![CDATA[$("p").before( document.createTextNode("Hello") );]]></code>
78-
<css><![CDATA[p { background:yellow; }]]></css>
79-
<html><![CDATA[<p> is what I said...</p>]]></html>
98+
<code><![CDATA[
99+
$( "p" ).before( document.createTextNode( "Hello" ) );
100+
]]></code>
101+
<css><![CDATA[
102+
p {
103+
background: yellow;
104+
}
105+
]]></css>
106+
<html><![CDATA[
107+
<p> is what I said...</p>
108+
]]></html>
80109
</example>
81110
<example>
82111
<desc>Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.</desc>
83-
<code><![CDATA[$("p").before( $("b") );]]></code>
84-
<css><![CDATA[p { background:yellow; }]]></css>
85-
<html><![CDATA[<p> is what I said...</p><b>Hello</b>]]></html>
112+
<code><![CDATA[
113+
$( "p" ).before( $( "b" ) );
114+
]]></code>
115+
<css><![CDATA[
116+
p {
117+
background: yellow;
118+
}
119+
]]></css>
120+
<html><![CDATA[
121+
<p> is what I said...</p><b>Hello</b>
122+
]]></html>
86123
</example>
87124
<category slug="manipulation/dom-insertion-outside"/>
88125
<category slug="version/1.0"/>

0 commit comments

Comments
 (0)