2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
2010-11-02 01:46:29 +00:00
< html lang = 'en' > < head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1" > < meta http-equiv = 'content-type' content = 'text/html; charset=UTF-8' / > < / head > < body >
2010-09-18 16:20:35 +00:00
< div data-role = "page" >
2010-09-21 14:58:54 +00:00
< div data-role = "header" >
2010-09-16 17:13:38 +00:00
< h1 > .before()< / h1 >
< / div >
2010-10-12 19:50:28 +00:00
< div data-role = "content" data-theme = "c" id = "before1" >
2010-09-16 17:13:38 +00:00
< h2 class = "jq-clearfix roundTop section-title" >
< span class = "name" > .before( content )< / span > < span class = "returns" > Returns: < a class = "return" href = "http://docs.jquery.com/Types#jQuery" > jQuery< / a > < / span >
< / h2 >
< div class = " entry-details" >
< p class = "desc" > < strong > Description: < / strong > Insert content, specified by the parameter, before each element in the set of matched elements.< / p >
< ul class = "signatures" >
< li class = "signature" id = "before-content" >
< h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/category/version/1.0/" > 1.0< / a > < / span > .before( content )< / h4 >
< p class = "arguement" > < strong > content< / strong > An element, HTML string, or jQuery object to insert before each element in the set of matched elements.< / p >
< / li >
< li class = "signature" id = "before-function" >
< h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/category/version/1.4/" > 1.4< / a > < / span > .before( function )< / h4 >
< p class = "arguement" > < strong > function< / strong > A function that returns an HTML string to insert before each element in the set of matched elements.< / p >
< / li >
< / ul >
< div class = "longdesc" >
< 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 >
< p > Consider the following HTML:< / p >
< pre > < div class="container">
< h2> Greetings< /h2>
< div class="inner"> Hello< /div>
< div class="inner"> Goodbye< /div>
< /div> < / pre >
< p > We can create content and insert it before several elements at once:< / p >
< pre > $('.inner').before('< p> Test< /p> ');< / pre >
< p > Each inner < code > < div> < / code > element gets this new content:< / p >
< pre > < div class="container">
< h2> Greetings< /h2>
< p> Test< /p>
< div class="inner"> Hello< /div>
< p> Test< /p>
< div class="inner"> Goodbye< /div>
< /div> < / pre >
< p > We can also select an element on the page and insert it before another:< / p >
< pre > $('.container').before($('h2'));< / pre >
< p > If an element selected this way is inserted elsewhere, it will be moved before the target (not cloned):< / p >
< pre > < h2> Greetings< /h2>
< div class="container">
< div class="inner"> Hello< /div>
< div class="inner"> Goodbye< /div>
< /div> < / pre >
< 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 >
< p > In jQuery 1.4, < code > .before()< / code > and < code > .after()< / code > will also work on disconnected DOM nodes:< / p >
< pre > $("< div/> ").before("< p> < /p> ");< / pre >
< p > The result is a jQuery set that contains a paragraph and a div (in that order).< / p >
< / div >
< h3 > Examples:< / h3 >
< div id = "entry-examples" class = "entry-examples" >
< div id = "example-0" >
< h4 > Example: < span class = "desc" > Inserts some HTML before all paragraphs.< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style> p { background:yellow; }< /style>
< script src="http://code.jquery.com/jquery-latest.js"> < /script>
< /head>
< body>
< p> is what I said...< /p>
< script> $("p").before("< b> Hello< /b> ");< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< div id = "example-1" >
< h4 > Example: < span class = "desc" > Inserts a DOM element before all paragraphs.< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style> p { background:yellow; }< /style>
< script src="http://code.jquery.com/jquery-latest.js"> < /script>
< /head>
< body>
< p> is what I said...< /p>
< script> $("p").before( document.createTextNode("Hello") );< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< div id = "example-2" >
< h4 > Example: < span class = "desc" > Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style> p { background:yellow; }< /style>
< script src="http://code.jquery.com/jquery-latest.js"> < /script>
< /head>
< body>
< p> is what I said...< /p> < b> Hello< /b>
< script> $("p").before( $("b") );< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body > < / html >
