before()

Insert content before each element in the set of HTML elements that match the selector of the script or of another query in the template (see query()). See also: after().

before(content)

Before(content) inserts content before each element in the set of elements that match the script's selector. Before() 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 looks for an element with the ID salesrepand inserts a paragraph before that element.

results.before("<p>Lorem Ipsum</p>");
Selector Matched element Matched element after script execution

#salesrep

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

This script does the same, but it uses the query() function to look up the element.

query("#salesrep").before("<p>Lorem ipsum</p>");
Matched element Matched element after script execution
<p id="salesrep">Peter Parker</p> <p>Lorem ipsum</p>
​​<p id="salesrep">Peter Parker</p>​

The following script looks for an element with the ID salesrep, inserts a paragraph before that element and colors that element red. 

query("#salesrep").before("<p>Lorem ipsum</p>").css("color","red");
Matched element Matched element after script execution
<p id="salesrep">Peter Parker</p> <p >Lorem ipsum</p>
​<p id="salesrep" style="color: red;">Peter Parker</p>

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

The following script searches the results for the string "ipsum" and puts "Lorem " before it. "Lorem " is automatically wrapped in a Span element.

results.find("ipsum").before("Lorem ");
Matched element Matched element after script execution
<p>ipsum dolor sit amet, consectetur adipiscing elit.</p> ​<p><span>Lorem </span>ipsum dolor sit amet, consectetur adipiscing elit.</p>

The following script looks for an element with the ID salesrep and inserts the text "Lorem Ipsum" before that element. "Lorem Ipsum" is automatically wrapped in a Span element.

query("#salesrep").before("Lorem Ipsum");
Matched element Matched element after script execution
<p>ipsum dolor sit amet, consectetur adipiscing elit.</p> ​<span>Lorem Ipsum</span>
​<p id="salesrep">Peter Parker</p>
 
  • Last Topic Update: 22, December, 2016 10:34 AM
  • Last Published: 23, May, 2019 01:55 PM