KnockoutJS - HTML Binding


HTML binding causes the associated DOM element to display the HTML specified by the parameter. This is very useful if you want to generate HTML markup dynamically.


html: <binding-value>


  • KnockoutJS sets DOM element's content to the parameter value provided. This functionality is also available in JQuery. If JQuery is not available, then KO is used to achieve this.

  • If the parameter is observable, then elements value is updated as and when the underlying observable is changed. Element is processed only once, if no observable is used.


Let us take a look ath the following example which demonstrates the use of html binding.

<!DOCTYPE html>
      <title>KnockoutJS Html binding</title>
      <script src = ""
         type = "text/javascript"></script>
      <p><span data-bind="html: welcomeMessgae "></span></p>
         function AppViewModel() {
            this.welcomeMessgae = ko.observable();
            this.welcomeMessgae ("<strong>Welcome to TutorialsPoint !!! For free online tutorials and courses click <a href = ''>here</a>.</strong>");
         ko.applyBindings(new AppViewModel());


Let's carry out the following steps to see how the above code works −

  • Save the above code in html-bind.htm file.

  • Open this HTML file in a browser.