append()
Insert content at the end of one or more HTML elements, which can be:
- The elements that match the selector of a script (see results).
- One element that matches the selector of a script that runs for "Each matched element" (see this and Setting the scope of a script).
- The elements returned by a query in the template (see query()).
See also: prepend().
append(content)
Inserts content as the last element at the end of one or more HTML elements. Append() creates a new result set.
content
String, HTML string or result set to insert after the element(s). 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");