File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -22,7 +22,7 @@ The example below creates a simple div element with the text "Hello World" and a
2222import {html } from ' @dobschal/html.js' ;
2323
2424document .body .append (
25- html ` <div >Hello World</div >`
25+ ... html ` <div >Hello World</div >`
2626);
2727```
2828
@@ -41,20 +41,26 @@ const view = html`
4141 <button onclick =" ${() => count.value++}" >Count Up 🚀</button >
4242` ;
4343
44- document .body .append (view);
44+ document .body .append (... view);
4545
4646```
4747
4848## API
4949
5050### html
5151
52- ` html ` is a tagged template literal function that creates an HTML element from a template string.
52+ ` html ` is a tagged template literal function that creates an HTML elements from a template string.
5353
5454``` javascript
5555// Create a div element with the text "Hello World"
5656const element = html ` <div >Hello World</div >` ;
57- console .log (element instanceof HTMLElement ); // true
57+ console .log (element[0 ] instanceof HTMLElement ); // true
58+ ```
59+
60+ In case the HTML template contains multiple elements, an array of elements is returned!
61+ When appending to the DOM, you can use the spread operator to append all elements at once.
62+ ``` javascript
63+ document .body .append (... html ` <div >Hello World</div >` );
5864```
5965
6066### Components
@@ -74,7 +80,7 @@ function App() {
7480 ` ;
7581}
7682
77- document .body .append (App ());
83+ document .body .append (... App ());
7884```
7985
8086### Event Listeners
You can’t perform that action at this time.
0 commit comments