angularjs - Wrap element around children of main element. JQLite -

i'm using angular , jqlite. have element <md-button my-attr>mytext<md-icon>close</md-icon> attribute directive.

in attr directive want wrap <div layout=row flex></div> around <md-button> children.

i used wrap(), children().wrap(), tried replacing contents() wrapped contents(). problem keep having is:

<md-button my-attr><div layout=row flex>mytext</div><div layout=row flex><md-icon>close</md-icon></div></md-button> 

i need 1 div wrapped around both of them.

<md-button><div layout=row flex>mytext<md-icon>close</md-icon></div></md-button> 

// $element // tried several things, last thing tried.

        var content = $element.children().wrap('<div layout=row flex></div>');         $element.empty();         $element.append(content); 

to clarify.

<md-button> $element. want wrap children of $element in single div. <md-button><child/><child/><child/></md-button> becomes <md-button><div><child/><child/><child/></div></md-button>

directive('mydirective',[function(){   return{     restrict:'a',     scope:{},     link:function(scope,element,attr){       element.wrap('<div class=".outer"></div>');     }   }; }]); 

this wrap element div has class .outer. use <div my-directive>element</div>