Simple Live Templates
Simple template contains some fixed code that expands into plain text. When invoked and expanded in the editor, the code specified in the template is automatically inserted into your source code, replacing the abbreviation.
Parameterized Live Templates
Parameterized template contains plain text and variables that enable user input.
If you need a dollar sign ($) in the template text, escape it by duplicating this character ($$).
After a template is expanded, variables appear in the editor as input fields whose values can be either filled in by the user or calculated by WebStorm automatically.
Surround Live Templates
Surround templates work only with the blocks of selected text. Such templates place code before and after the selected block.
Insert parameterised live template (Ctrl+JCtrl+JCtrl+JCtrl+JCtrl+JCtrl+JCtrl+JCtrl+Shift+Alt+JCommand JCommand JCommand J):
Surround with live template (Ctrl+Alt+JCtrl+Alt+JCtrl+Alt+JCtrl+Alt+JCtrl+Alt+JCtrl+Alt+JCtrl+Alt+JCtrl+Alt+JAlt Command JAlt Command JAlt Command J):
Refer also to the page Wrapping a Tag. Example of Applying Surround Live Templates.