add()
The add() function allows you to add elements to a set of HTML elements that match the of the script or of another query in the template (see query()).
add(content)
Returns the union of this result or result set and other content.
content
A query result. This can be an HTML string or a result set.
Examples
Add one result set to another
This script adds one query result to another and sets the background color to yellow. query("#test1").add(query("#test2")).css("background", "yellow");
Note: the way the functions add() and css() are used in this script is called 'chaining'. Chaining is optional; the same could be achieved by storing the
results of the queries in a variable: var myResult = query("#test1"); myResult.add(query("#test2"); myResult.css("background", "yellow");
Creating an empty result set and adding elements to it
The following script loads in an iteration and adds their elements to an empty result set (using query() ). Then it replaces a
placeholder in the template with the new result. var chapters = query(); for ( var i = 1; i <= 4; i++) { chapters = chapters.add(loadhtml('snippets/Chapter' + i + '.html')); } results.replaceWith(chapters);
|
Matched element |
Matched element after script execution |
#chapters |
<p id="chapters">{{chapters}}</p> |
<h1>Chapter 1</h1> <p>Lorem ipsum...</p> <h1>Chapter 2</h1> <p>Lorem ipsum...</p> <h1>Chapter 3</h1> <p>Lorem ipsum...</p> <h1>Chapter 4</h1> <p>Lorem ipsum...</p> |
|