after()

Inserts content after 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: before().

after(content)

Inserts content after one or more HTML elements and creates a new result set.

content

String, HTML string or result set to insert after the matched 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 looks up an element with the ID #salesrep and inserts a paragraph after it.

Copy
query("#salesrep").after("<p>Lorem ipsum</p>");

 

Matched element

Matched element after script execution

​<p id="salesrep">Peter Parker</p>

<p id="salesrep">Peter Parker</p>
<p>Lorem ipsum</p>​

This script looks up an element with the ID #salesrep, sets its text color to red and inserts a paragraph after it.

Copy
query("#salesrep").after("<p>Lorem ipsum</p>").css("color","red");

 

Matched element

Matched element after script execution

​<p id="salesrep">Peter Parker</p>

<p id="salesrep" style="color: red;">Peter Parker</p>
<p>Lorem ipsum</p>​

Note that the way the functions after() 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 salesrep = query("#salesrep"); 
salesrep.after("<p>Lorem ipsum</p>"); 
salesrep.css("color","red");

The following script inserts a paragraph after the elements in the results (the set of HTML elements that match the selector of the script).

Copy
​results.after("<p>Lorem Ipsum</p>");

 

Matched element

Matched element after script execution

​<p id="salesrep">Peter Parker</p>

<p id="salesrep">Peter Parker</p>
<p>Lorem ipsum</p>​

This script looks for the string "Lorem " in the results (the set of HTML elements that match the selector of the script) and inserts the string "ipsum" right after that text. The string is automatically enclosed in a span.

Copy
​results.find("Lorem ").after("ipsum");

 

Matched element

Matched element after script execution

<p>Lorem dolor sit amet, consectetur adipiscing elit.</p>

​<p>Lorem <span>ipsum</span> dolor sit amet, consectetur adipiscing elit.</p>

This script looks up an element with the ID #salesrep and inserts a string after it. The string is automatically enclosed in a span.

Copy
query("#salesrep").after("Lorem Ipsum");

 

Matched element

Matched element after script execution

​<p id="salesrep">Peter Parker</p>

​<p id="salesrep">Peter Parker</p>
<span>Lorem Ipsum</span>