Each specified element is appended to each element in the original collection.
// Create a <g> 'group' element
collection.g()
// Append an element
.append(document.getElementById('foo'))
// Append elements targeted by a CSS selector
.append('.bar')
// Append elements in a Pablo collection
.append(Pablo.circle()))
// Append elements in a jQuery collection
.append(jQuery('#example'))
// Append elements in an array
.append([Pablo.a(), Pablo.g()]);
If elements is an element name string and an attributes object is supplied, then new elements will be created and appended for each element in the collection. The same happens when elements is an array of element names:
collection.g()
// Append single created element
.append('line', {stroke:'black'})
// Append multiple created elements
.append(['line', 'circle', 'path']);
The attributes object is optional when an array of element names is passed, but required if a single element name is passed (otherwise, the single element name would be treated as a CSS selector).
If the collection contains multiple elements, each specified element gets cloned after it is first appended.
Pablo(['g', 'g'])
.append('#foo');
// the #foo element is appended to the first <g>
// then it is cloned before being appended to the second <g>