diff --git a/documentation/UI/render-dom-elements.md b/documentation/UI/render-dom-elements.md index 95238bbe..7bcf93e9 100644 --- a/documentation/UI/render-dom-elements.md +++ b/documentation/UI/render-dom-elements.md @@ -1,16 +1,45 @@ -There are two options to render DOM elements: -- Use `tag` from `ui/general/html.js` -- Use `TemplateBuilder` object (t) from the render function in the view. +tldr; Use `tag` from `ui/general/html.js` to quickly create DOM elements. +## Syntax +--- +The general syntax is as follows: +```js +tag.tag_name({attribute1: value, attribute2: value, ...}, [child_elements]); +``` +**tag_name** can be any one of the following: +``` + br, a, ol, ul, li, div, h1, h2, h3, h4, h5, h6, + p, strong, em, span, img, section, main, article, aside, + pre, button, time, input, textarea, label, form, progress, output, video +``` + +
+ +eg: +Here is an example HTML segment followed with the code to create it in Hydrogen. +```html +
+

Demo

+ +
+``` +```js +tag.section({className: "main-section"},[ + tag.h1("Demo"), + tag.button({className:"btn_cool"}, "Click me") + ]); +``` +
+ +**Note:** In views based on `TemplateView`, you will see `t` used instead of `tag`. +`t` is is `TemplateBuilder` object passed to the render function in `TemplateView`. Although syntactically similar, they are not functionally equivalent. -Primarily `tag` **does not support** bindings nor event handlers. +Primarily `t` **supports** bindings and event handlers while `tag` **does not**. ```js // The onClick here wont work!! tag.button({className:"awesome-btn", onClick: () => this.foo()}); -``` - For these functionalities always use the TemplateBuilder object that is passed as argument to the render method. -```js + render(t, vm){ // The onClick works here. t.button({className:"awesome-btn", onClick: () => this.foo()});