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.