1 line
2.9 KiB
JSON
1 line
2.9 KiB
JSON
{"name":"prependTo","type":"method","title":".prependTo()","deprecated":null,"removed":null,"desc":"Insert every element in the set of matched elements to the beginning of the target.","categories":["manipulation/dom-insertion-inside","version/1.0"],"entries":[{"return":"jQuery","signatures":{"added":"1.0","argument":{"type":[{"name":"Selector"},{"name":"htmlString"},{"name":"Element"},{"name":"Array"},{"name":"jQuery"}],"desc":"A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements will be inserted at the beginning of the element(s) specified by this parameter.","name":"target"}},"examples":{"desc":"Prepend all spans to the element with the ID \"foo\" (Check .prepend() documentation for more examples)","css":"\n div {\n background: yellow;\n }\n","code":"\n$( \"span\" ).prependTo( \"#foo\" );\n","html":"\n<div id=\"foo\">FOO!</div>\n<span>I have something to say... </span>\n"},"longdesc":"\n <p>The <code><a href=\"/prepend/\">.prepend()</a></code> and <code>.prependTo()</code> methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With <code>.prepend()</code>, the selector expression preceding the method is the container into which the content is inserted. With <code>.prependTo()</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 into the target container.</p>\n <p>Consider the following HTML:</p>\n <pre><code>\n<h2>Greetings</h2>\n<div class=\"container\">\n <div class=\"inner\">Hello</div>\n <div class=\"inner\">Goodbye</div>\n</div>\n </code></pre>\n <p>We can create content and insert it into several elements at once:</p>\n <pre><code>\n$( \"<p>Test</p>\" ).prependTo( \".inner\" );\n </code></pre>\n <p>Each inner <code><div></code> element gets this new content:</p>\n <pre><code>\n<h2>Greetings</h2>\n<div class=\"container\">\n <div class=\"inner\">\n <p>Test</p>\n Hello\n </div>\n <div class=\"inner\">\n <p>Test</p>\n Goodbye\n </div>\n</div>\n </code></pre>\n <p>We can also select an element on the page and insert it into another:</p>\n <pre><code>\n$( \"h2\" ).prependTo( $( \".container\" ) );\n </code></pre>\n <p>If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):</p>\n <pre><code>\n<div class=\"container\">\n <h2>Greetings</h2>\n <div class=\"inner\">Hello</div>\n <div class=\"inner\">Goodbye</div>\n</div>\n </code></pre>\n <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>\n "}]} |