How to modify existing <content> in a element?

[Maxim Barinov]

I would like to extend the content and add new dom elements that contain data-binding. In the example runs the add new item, but data-binding does not work. Is it possible to solve my problem?

<polymer-element name="wizard">
    <template>
        <style>
            :host {
                display: block;
            }

            :host #pages section {
                position: static;
            }

        </style>

        <core-animated-pages id="pages"
                             transitions="slide-from-right"
                             selected="{{selectedPageIndex}}">
            <content id="content"></content>
        </core-animated-pages>
    </template>

    <script>
        Polymer({
            attached: function() {
                var nodes = this.$.content.getDistributedNodes();

                for(var i = 0; i < nodes.length; i++) {
                    if(nodes[i] instanceof HTMLElement) {
                        var el = nodes[i].querySelector('div div');
                        el.innerHTML = el.innerHTML + '<button on-tap="{{nextPage}}">Next</button>';
                    }
                }
            },

            selectedPageIndex: 0,

            previousPage: function () {
                this.$.pages.selectPrevious(true);
            },

            nextPage: function () {
                this.$.pages.selectNext(true);
            }
        });
    </script>
</polymer-element>