Wrap element around children of main element. JQLite

Question

I'm using angular and JQLite. I have an element <md-button my-attr>MyText<md-icon>close</md-icon> with a attribute directive.

In my attr directive I want to wrap <div layout=row flex></div> around the <md-button> children.

I used wrap(), children().wrap(), I tried replacing the contents() with a wrapped contents(). The problem I 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 is // I tried several things, this is the last thing I tried.

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

To clarify.

<md-button> is $element. I want to wrap the children of $element in a single div. so <md-button><child/><child/><child/></md-button> becomes <md-button><div><child/><child/><child/></div></md-button>

Answer 1

       var content = "<div layout=row flex>" + $element.html() + "</div>";
        $element.empty();
        $element.append(content);

Was able to get it from: #1

Answer 2

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

This will wrap your element with a div that has a class .outer. Use it like this <div my-directive>Element</div>

Answer 3

If you have

<md-button>
  <child/>
  <child/>
  <child/>
</md-button>

and you want get

<md-button>
  <div>
    <child/>
    <child/>
    <child/>
  </div>
</md-button>

then try this

element.html(angular.element('<div></div>').html(element.contents()));