prepend()

Insert content at the beginning of 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: append().

prepend(content)

Insert content as the first element to each element in the set of HTML elements that match the selector of the script or of another query in the template (see query()). Append creates a new result set.

content

HTML string, string or HTML string 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 inserts a heading as the first element in an element that has the ID #box.

results.prepend("<h1>Personal information</h1>");
Selector Matched element Matched element after script execution
#box ​<div id="box">​
<p>Peter Parker</p>
</div>		 <div id="box">​
<h1>Personal information</h1>
<p>Peter Parker</p>​
</div>​

This script inserts a heading as the first element in an element that has the class name.

results.prepend("<b>Name: </b>");
Selector Matched element Matched element after script execution
.name <div>​
<h1>Personal information</h1>
<p class="name">Peter Parker</p>
</div>		 <div>​
<h1>Personal information</h1>
<p class="name"><b>Name: </b>Peter Parker</p>
</div>​

This script inserts content in multiple <div> elements at the same time.

​results.prepend("<h1>Personal information</h1>");
Selector Matched element Matched element after script execution
div <div id="box">​
<p>Peter Parker</p>
</div>
<div id="box">​
<p>Peter Parker</p>
</div>		 <div id="box">​
<h1>Personal information</h1>
<p>Peter Parker</p> ​
</div>
​​​<div id="box"> ​
<h1>Personal information</h1>
<p>Peter Parker</p> ​
</div>​​

This script prepends a snippet that contains the text "<h1>Personal information</h1>".

var a = loadhtml('snippets/snippet.html'); 
results.prepend(a);
Selector Matched element Matched element after script execution
div <div id="box">​
<p>Peter Parker</p>
</div>		 <div id="box">​
<h1>Personal information</h1>
<p>Peter Parker</p>​
</div>​​

 

This script uses the function query() to find a box. Then it inserts a heading as the first element in that box.

query("#box").prepend("<h1>Personal information</h1>");
Matched element Matched element after script execution
<div id="box">​
<p>Peter Parker</p>
</div>		 <div id="box">​
<h1>Personal information</h1>
<p>Peter Parker</p>​
</div>​​

This script uses the function query() to find a box, prepends a heading and sets the text color of the entire box to red.

query("#box").prepend("<h1>Personal information</h1>").css("color","red");
Matched element Matched element after script execution
<div id="box">​
<p>Peter Parker</p>
</div>		 <div id="box" style="color: red;">​
<h1>Personal information</h1>
<p>Peter Parker</p>​
</div>​​

Note: the way the functions prepend() 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.prepend("<p>Peter Parker</p>"); 
box.css("color","red");
  
  • Last Topic Update: 22, December, 2016 10:34 AM
  • Last Published: 23, May, 2019 01:55 PM