clone()

This function returns a copy of one HTML element or of a set of 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()).

To duplicate an existing template element, clone it before calling append(); see append().

This function can also be used to output a variable number of sections in each document, based on data. See also: Cloning sections and Clone Section scripts.

Examples

This script performs an iteration over the elements in the results (the elements that match the selector of the script).

Copy

var row = query("tbody tr", results).clone();
query("tbody", results).append(row);

The following script clones an existing table row to match the number of rows in a detail table. Then it iterates over the rows to populate the fields.

Copy

// Create the number of rows based on the records in the detail table 
// We start at 1 so the boilerplate row is used too and there is no need to delete that row 
for(var r = 1; r < record.tables.detail.length; r++) { 
results.parent().append(results.clone()); 
}

// Iterate over the rows and populate them with the data from the accompanying data row 
query("#table_2 > tbody > tr").each(function(i) { 
this.find('@ItemNumber@').text( record.tables.detail[i].fields["ItemNumber"]); 
this.find('@ItemOrdered@').text( record.tables.detail[i].fields["ItemOrdered"]); 
this.find('@ItemTotal@').text( record.tables.detail[i].fields["ItemTotal"]); 
this.find('@ItemDesc@').text( record.tables.detail[i].fields["ItemDesc"]); 
this.find('@nr@').text(i); 
});

The following script clones and populates a boilerplate row. Once completed you will need to hide the boilerplate row.

Copy

for(var i = 0; i < record.tables.detail.length; i++) {  

var row = results.clone(); //Clone our boilerplate row  

row.find('@ItemNumber@').text( record.tables.detail[i].fields["ItemNumber"]); 
row.find('@ItemOrdered@').text( record.tables.detail[i].fields["ItemOrdered"]); 
row.find('@ItemTotal@').text( record.tables.detail[i].fields["ItemTotal"]); 
row.find('@ItemDesc@').text( record.tables.detail[i].fields["ItemDesc"]); 
row.find('@nr@').text( i );  

results.parent().append(row); 
}  

// Hide our boilerplate row (note that this doesn't really delete the row). 
results.hide();