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.

Copy
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.

Copy
​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.

Copy
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.

Copy
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.

Copy
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:

Copy
var box = query("#box"); 
box.append("<p>Peter Parker</p>"); 
box.css("color","red");