--- title: "Mastering LemonadeJS JavaScript Methods | v3 docs" description: "LemonadeJS v3 archive. Learn the fundamental LemonadeJS methods to create powerful and dynamic JavaScript components for your web applications." source: https://lemonadejs.com/docs/v3/methods/ --- LemonadeJS methods ================== Summary ------- The following table lists the native LemonadeJS methods. | Method | Description | | --- | --- | | **Core functions** | | | element(string, object, object) | It will create the DOM elements based on an HTML template and bind the scope with the self object.
`lemonade.element(template: String, self: Object, components: Object) => DOMElement` | | render(DOMElement, DOMElement, object?) | It will append the newly created LemonadeJS DOM elements to a root given.
`lemonade.render(component: Function, root: HTMLElement, self?: object, template?: HTMLElement) => DOMElement` | | apply(DOMElement, object, object) | Bind the self scope to an existing DOMElement already in the DOM.
`lemonade.apply(root: HTMLElement, self: Object, components: Object) => void` | | setComponents(object) | Add component references to be used across the whole application.
`lemonade.setComponents(components: object) => void` | | **Sugar functions** | | | set(string, self, persistence) | Make the self or a data dispatcher available in the Sugar common container to be used across different components.
`lemonade.set(alias: String, self: Object, persistence?: Boolean) => void` | | get(string) | Get a self reference from the Sugar common container.
`lemonade.get(alias: String) => Object \| Function` | | dispatch(string, data) | Call a data dispatcher.
`lemonade.dispatch(alias: String, data: Object) => void` | Methods ------- ### lemonade.element - The `lemonade.element` renders a HTML string and bind a self data object its DOM elements. ### lemonade.render - The `lemonade.render` runs a component or class and bind the result to a existing DOM element. ### lemonade.apply - The `lemonade.apply` will be used when you wish to bind a self to an existing appended DOM element. That is useful to apply a self to an existing application without changing the application. ## Examples ### Basic JavaScript Example The following examples are basic examples on how to apply a self to an existing DOM root element. Of course this is just an example for education purposes and a better scope encapsulation should be considered. ```html

{{self.title}}

``` #### Control an existing HTML form The following example binds a self to an HTML form to control the values of the form elements. ```html
``` Conclusion ---------- You can use `lemonade.render` and `lemonade.element` to create components, or use `lemonade.apply` to bind a self to a block of HTML code.   [Next chapter: Native lemonade JavaScript events](/docs/v3/events/){.button .main}