up.Preview
up.Preview.prototype.insert([reference], [position], newElement)
Instance method
Temporarily inserts an element.
The element will be removed when the preview ends.
Providing the new element
The new element is passed as the last argument to the insert() method.
For example, this preview will insert a .spinner element as the last child of the targeted fragment:
up.preview('spinner', function(preview) {
let spinnerElement = up.element.createFromHTML('<span class="spinner">Please wait...</span>')
preview.insert(spinnerElement)
})
You may also pass a string of HTML:
up.preview('spinner', function(preview) {
preview.insert('<span class="spinner">Please wait...</span>')
})
Cloning templates
If the given element is a template, it will be cloned before insertion.
Let's say we have a template for the spinner element:
<template id="spinner-template">
<span class="spinner">
Please wait ...
</span>
</template>
We can pass a selector for the template to clone:
up.preview('spinner', function(preview) {
preview.insert('#spinner-template')
})
Any template variables can be appended after the selector as relaxed JSON:
up.preview('spinner', function(preview) {
preview.insert('#spinner-template { message: "One moment..." }')
})
For more control you may clone the template manually using up.template.clone():
up.preview('spinner', function(preview) {
let spinnerElement = up.template.clone('#spinner-template', { message: "One moment..." }),
spinnerElement.classList.add('big')
preview.insert(spinnerElement)
})
Controlling the insert position
You can control where the new element by providing a reference element and an adjacent position relative to the reference argument.
For example, this preview will create a .spinner element as the first child of the <body>:
up.preview('spinner', function(preview) {
preview.insert(document.body, 'afterbegin', '<span class="spinner">Please wait...</span>')
})
The following insert positions are supported:
| Value | Insert position |
|---|---|
"beforebegin" |
Insert before reference, as a new sibling. |
"afterbegin" |
Prepend to reference, before its first child. |
"beforeend" |
Append to reference , after its last child. |
"afterend" |
Insert after reference, as a new sibling. |
If the reference element is omitted, the new element will be inserted relative to the targeted fragment.
If the adjacent position is omitted, the new element will become the new last child
of the reference element ('beforeend').
Compilation
When this function inserts a new element, it is compiled.
When the preview ends, the element is destroyed.
Moving existing elements
When the last argument is an attached element, it is moved to the indicated position relative to the reference. When the preview ends, the element is returned to its initial position.
Moved elements are neither compiled nor destroyed by this function.
Parameters
The reference element relative to which the new element will be inserted.
You may pass an Element or a CSS selector.
The insert position relative to the reference element.