HTML Binding

The Kendo UI HTML (html) binding sets the HTML content (innerHTML) of the target DOM element to a View-Model value.

Changing the View-Model value via code updates the HTML of the target element. If the View-Model value is not of primitive type (Text, Number, or Date), the result returned by the toString JavaScript method is used as the value.

Getting Started

To set the value displayed by an input, textarea or select, use the value binding instead.

<span data-bind="html: name"></span>
<script>
var viewModel = kendo.observable({
    name: "John Doe"
});

kendo.bind($("span"), viewModel);
</script>

The following example demonstrates the expected output. The data-bind attribute is removed for clarity.

<span>John Doe</span>

If the View-Model value contains HTML tags, they will be embedded in the final output.

<span data-bind="html: name"></span>
<script>
var viewModel = kendo.observable({
    name: "<strong>John Doe</strong>"
});

kendo.bind($("span"), viewModel);
</script>

The following example demonstrates the expected output of the code.

<span><strong>John Doe</strong></span>

To display any HTML tags that are contained in the View-Model value, use the text binding.

Important Notes

HTML binding may not work for all elements in older Internet Explorer versions. The html binding relies on the innerHTML DOM element property. The latter is not fully supported in older Internet Explorer versions for all DOM elements. For example, setting the innerHTML of a table is not supported.

See Also

• MVVM Overview
• Overview of the Attribute Binding
• Overview of the Checked Binding
• Overview of the Click Binding
• Overview of the CSS Binding
• Overview of the Custom Binding
• Overview of the Disabled Binding
• Overview of the Enabled Binding
• Overview of the Events Binding
• Overview of the Invisible Binding
• Overview of the Source Binding
• Overview of the Style Binding
• Overview of the Text Binding
• Overview of the Value Binding
• Overview of the Visible Binding