HTML - Wrap current tag inside another tag

Question

I'm editing an HTML file, and my cursor is inside a tag, like this:

<textarea class="code-area"></textarea>

And I'm trying to wrap all of this tag inside a div tag, so that it'd be like this:

<div>
    <textarea class="code-area"></textarea>
</div>

I can use vim-surround and type yss<div>, but it'll change it into this:

  <div><textarea id="code-area"></textarea></div>

How can I wrap it so that it adds newlines as well?

Also, the yss<div> command only wraps the current line. I'm interested in wrapping an entire tag, no matter how many lines it has.

Answer 1

In vim-surround ys{motion} puts "a surround text" on the same line. To place it on a line of its own with indent you should use yS{motion} instead.

Next, a motion you want for this case is :h at (a tag). So this results in ySat<div>

Answer 2

As you are surrounding single line you VS<div>

Let's break it down:

• V enter visual by line select mode
• S surround with...
• <div>

Your y s s < d i v >

command didn't work as third letter which is s is something like substitute surrounding, while we want something like append a some tag t, as in @Matt's answer.

By the way, your y s s < d i v >
way useful while typing this answer for surrounding letters of yss<div> with <kbd> tag to look them like buttons.

Credit go to official Vim Surround Docs.