after()
Insert content after each element in the set of HTML elements that match the of the script or of another query in the template (see query()). See
also: before().
after(content)
Insert content after each element in the set of HTML elements that match the selector of the script, or of another query in the template (see query()). After
creates a new result set.
content
String, HTML string or result set
to insert after the matched elements.
In case a plain text string is provided, it is
automatically wrapped in a <span> element to avoid orphan
text nodes to appear in the <body> element.
Examples
This script looks up an element with the ID #salesrep and inserts a paragraph after it. query("#salesrep").after("<p>Lorem ipsum</p>");
| Matched element |
Matched element after script execution |
| <p id="salesrep">Peter Parker</p> |
<p id="salesrep">Peter Parker</p>
<p>Lorem ipsum</p> |
This script looks up an element with the ID #salesrep, sets its text color to red and inserts a paragraph after it. query("#salesrep").after("<p>Lorem ipsum</p>").css("color","red");
| Matched element |
Matched element after script execution |
| <p id="salesrep">Peter Parker</p> |
<p id="salesrep" style="color:
red;">Peter Parker</p>
<p>Lorem ipsum</p> |
Note: the way the functions after() and css() are used in this script is called 'chaining'. Chaining is optional; the same could be achieved by storing the
result of the query in a variable: var salesrep = query("#salesrep");
salesrep.after("<p>Lorem ipsum</p>");
salesrep.css("color","red");
The following script inserts a paragraph after the elements in the results (the set of HTML elements that match the selector of the script). results.after("<p>Lorem Ipsum</p>");
| Matched element |
Matched element after script execution |
| <p id="salesrep">Peter Parker</p> |
<p id="salesrep">Peter Parker</p>
<p>Lorem ipsum</p> |
This script looks for the string "Lorem " in the results (the set of HTML elements that match the selector of the script).and inserts the string "ipsum" right after that text. The string is automatically enclosed in a span. results.find("Lorem ").after("ipsum");
| Matched element |
Matched element after script execution |
| <p>Lorem dolor sit amet, consectetur adipiscing elit.</p> |
<p>Lorem <span>ipsum</span> dolor sit amet, consectetur adipiscing elit.</p>
|
This script looks up an element with the ID #salesrep and inserts a string after it. The string is automatically enclosed in a span. query("#salesrep").after("Lorem Ipsum");
| Matched element |
Matched element after script execution |
| <p id="salesrep">Peter Parker</p> |
<p id="salesrep">Peter Parker</p>
<span>Lorem Ipsum</span>
|
|