This function prepends content to an element. It works exactly the same as ParentNode.prepend() except that when the implied content is undefined, it is converted to an empty string.
The suffix Async differentiates this method from its Sync counterpart - prependSync(). Unlike the Sync counterpart, prependAsync() is a promise-based function that runs in a different flow from that of the calling code. It follows a performance strategy that lets the browser engine decide the most convenient time to honour its call.
import prependAsync from '@web-native-js/play-ui/src/dom/prependAsync.js';let promise = prependAsync(el[, ...content);el-HTMLElement: The target DOM element.content-[String|HTMLElement]: The set of content to prepend. Each could be a plain text, an HTML/XML markup, or even a DOM node.
Promise- A Promise that resolves when the operation finally gets executed. The target DOM element is returned when the promise resolves.
<body></body>
// Prepend content
prependAsync(document.body, '!', 'world', ' ', 'Hello').then(body => {
// Do something with body
});Technically, DOM operations initiated with prependAsync() are internally batched to a write queue using the Reflow utility. Read operations run first, then write operations. This works to eliminate layout thrashing as discussed in Reflow's documentation.
Notice the order of execution in the following example.
// Prepend content
prependAsync(document.body, '!', 'world', ' ', 'Hello').then(() => {
console.log('Prepend operation');
});
// Get content
htmlAsync(document.body).then(content => {
console.log('Current content is: ' + content);
});
// ------------
// console
// ------------
Current content is:
Prepend operationThe proper way to synchronize with an async function is to move code into its then() block as seen below.
// Prepend content
prependAsync(document.body, '!', 'world', ' ', 'Hello').then(() => {
console.log('Prepend operation');
// Get content
htmlAsync(document.body).then(content => {
console.log('Current content is: ' + content);
});
});
// ------------
// console
// ------------
Prepend operation
Current content is: Hello world!