Knockout data-binding nested html elements

knockout.js

Solution

Normally, you would want to change your HTML to work properly for this scenario. However, if that is not possible, then you could use a custom binding that inserts the span for you.

It would be like:

ko.bindingHandlers.insertText = {
    init: function(element, valueAccessor) {
        var span = document.createElement("span"),
            firstChild = element.firstChild;

        element.insertBefore(span, firstChild);
        ko.applyBindingsToNode(span, { text: valueAccessor() });       
    }       
};

Sample: http://jsfiddle.net/rniemeyer/fLmXu/

Problem

I have h2 tag with data-bind text property to a model value and inside i have a span tag which is also a data-bind text property to a model value. But span is getting replace when the model is binded, is there any way to append the html. http://jsfiddle.net/WKnWr/1/

Original source