I'm writing a Directive (using AngularJS 1.2.0-rc2, if that matters) that adds a "clear" button (think of the "x" button that the browser adds for `<input type="search">` elements) to an `<input>`.

As the "clear" button is injected from the Directive and is positioned absolutely, I'd like to contain both the existing `<input>` and the newly added "clear" button in a wrapper element that has `position: relative` to ensure proper positioning of the "clear" button.

The declared HTML looks like this:

```
<input type="text" id="myField" data-ng-model="someModel" data-search>

```

The Directive I have so far:

```
angular.module('myApp', []).directive('search', function() {
  var
    clear = angular.element('<a href role="button" class="btn x" style="display:none">&times;</a>'),
    wrapper = angular.element('<div style="position: relative"></div>');

  return {
    restrict: 'A',
    link: function( scope, element, attrs ) {
      element.wrap(wrapper.append(clear));

      // more code that's not relevant to my question
    }
  };
});

```

The HTML I end up with is

```
<div style="position: relative">
  <a href role="button" class="btn x" style="display: none">&times;</a>
  <input type="text" id="myField" data-ng-model="someModel" data-search>
</div>

```

which is what I'm after, but I'd like to ideally template the two new elements and abstract the DOM manipulation out of my `link` function.

I feel like there's probably a better way to go about this using either or both `replace`/`template` and `transclude` options, but I'm not sure how to retain and use the source element (with all of its attributes and data bindings) with either of those options.

Also note that even though my sample has an `ng-model` defined on the source element, that should be considered optional. I'd also like to keep the Directive restricted to attributes (`restrict: 'A'`).