append()
Insert content at the end of each element in the set of each element in a set of HTML elements that match the selector of the script or of another query in the template (see query()). See also: prepend().
append(content)
Insert content as the last element to each element in the set of HTML elements that match the selector of the script or of another query in the template (see query()). Append creates a new result set.
content
String, HTML string or result set to insert after the 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 appends a paragraph to the results (the set of HTML elements that match the selector of the script).
results.append("<p>Peter Parker</p>");| Selector | Matched element | Matched element after script execution |
|---|---|---|
| #box | <div id="box"> <h1>Personal information</h1> </div> |
<div id="box"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
This script appends a string to the results (the HTML elements that match the selector of the script). The string is added to the end of the matched element(s) and wrapped in a Span element.
results.append("Peter Parker");| Selector | Matched element | Matched element after script execution |
|---|---|---|
| .name | <div> <h1>Personal information</h1> <p class="name"><b>Name: </b></p> </div> |
<div> <h1>Personal information</h1> <p class="name"><b>Name: </b><span>Peter Parker</span></p> </div> |
This script's selector is <div>, so the script appends a paragraph to all Div elements in the template.
results.append("<p>Peter Parker</p>");| Selector | Matched element | Matched element after script execution |
|---|---|---|
| div | <div> <h1>Personal information</h1> </div> <div> <h1>Personal information</h1> </div> |
<div> <h1>Personal information</h1> <p>Peter Parker</p> </div> <div> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
The following script appends a snippet to a Div element with the ID box.
var a = loadhtml('snippets/snippet_name.html');
results.append(a);|
Selector |
Matched element | Matched element after script execution |
|---|---|---|
|
#box |
<div id="box"> <h1>Personal information</h1> </div> |
<div id="box"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
This script looks for an element with the ID box and appends a paragraph to it.
query("#box").append("<p>Peter Parker</p>");| Matched element | Matched element after script execution |
|---|---|
| <div id="box"> <h1>Personal information</h1> </div> |
<div id="box"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
This script looks for an element with the ID box, appends a paragraph to it and colors all text inside the box red.
query("#box").append("<p>Peter Parker</p>").css("color","red");| Matched element | Matched element after script execution |
|---|---|
| <div id="box"> <h1>Personal information</h1> </div> |
<div id="box" style="color: red;"> <h1>Personal information</h1> <p>Peter Parker</p> </div> |
Note: the way the functions append() 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 box = query("#box");
box.append("<p>Peter Parker</p>");
box.css("color","red");