javascript - Parsing html code with jQuery -

i'm using new material-design-lite (mdl) on website. i'm loading in dynamic content using mustache.js.

now, newly created elements need registered using upgradeelement function mdl know of them , apply javascript them. on website have sample code this:

<div id="container"/> <script>   var button = document.createelement('button');   var textnode = document.createtextnode('click me!');   button.appendchild(textnode);   button.classname = 'mdl-button mdl-js-button mdl-js-ripple-effect';   componenthandler.upgradeelement(button);   document.getelementbyid('container').appendchild(button); </script> 

however, using jquery , i'm not entirely sure how should parse whole template mustache.js , register each component correctly. i've tried:

var filledtemplate = '     <div class="mdl-card mdl-shadow--2dp">        <div class="mdl-card__title">            <h2 class="mdl-card__title-text">title</h2>        </div>        <div class="mdl-card__supporting-text">                <p>a simple paragraph below radio buttons</p>                <p>                    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="input_0">                        <input type="radio" id="input_0" class="mdl-radio__button" name="options" value="radio1" />                        <span class="mdl-radio__label">radio button 1</span>                    </label>                </p>                <p>                    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="input_1">                        <input type="radio" id="input_1" class="mdl-radio__button" name="options" value="radio2" />                        <span class="mdl-radio__label">radio button 2</span>                    </label>                </p>        </div>        <div class="mdl-card__actions mdl-card--border">            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">                send            </a>        </div>    </div>';  var html = $.parsehtml(filledtemplate); $(html).find(".mdl-js-button").each(function(){     componenthandler.upgradeelement($(this)); }); 

the filledtemplate give clear idea of stuff can contain. need bind input's, textareas, sliders, radios, checkboxes , button. in example above can see simple card-layout mdl, 2 radio boxes , button.

i tried componenthandler upgrade button-element first, mdl returns element.getattribute not function, guess i'm giving wrong value .upgradeelement().

what doing wrong here?

here codepen example: http://codepen.io/anon/pen/jdbygz

try componenthandler.upgradeelement(this, 'materialbutton'); if want update button or componenthandler.upgradeallregistered(); update elements.

http://jsbin.com/tuluda/4/edit?js,output