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()).

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");