Wrap html element with Divs from custom directive - html

Question

I have an <input /> tag which I want to wrap with some specific Div tags. I'm making custom directive in which I want to implement this functionality. But the problem which I'm facing is, element's prepend() method adds the whole tag i.e. it starts and ends before the targeted input tag. Similarly, append() method on element appends the Div inside the input tag, while what I actually want is,
On html:
<input id="oldinput" custom-textbox /> <!-- custom-textbox is my directive -->
After applying directive, in source, I want this:
<div id="mynewdiv> <!-- added from directive -->
<input id="oldinput" custom-textbox /> <!-- present input tag where I'd apply my directive -->
<div id="othernewdiv" /> <!-- new div to be added from directive -->
</div> <!-- end of newly added div from directive -->
But the result after using append() and prepend() functions:
<div id="mynewdiv> </div> <!-- added from directive, div ends here only -->
<input id="oldinput" custom-textbox > <!-- present input tag where I'd apply my directive, doesn't end here -->
<div id="othernewdiv" /> <!-- new div to be added from directive, it's added inside input tag -->
</div> <!-- end of newly added div from directive -->
</input> <!-- Wraps my newly added div -->
Completely strange behavior. Can someone help me with this?

Answer 1

wrap() does exactly what you want:
// wrap the input with a div
element.wrap('<div id="mynewdiv></div> ')
// add the second div
element.parent().append('<div id="othernewdiv" />')

Answer 2

You should take a look at ngTransclude and also the Developper Guide.
Creating a Directive that Wraps Other Elements
We've seen that you can pass in models to a directive using the
isolate scope, but sometimes it's desirable to be able to pass in an
entire template rather than a string or an object. Let's say that we
want to create a "dialog box" component. The dialog box should be able
to wrap any arbitrary content.