# Quick way to wrap new tags around existing html tags?

**URL:** https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378
**Category:** General
**Created:** [November 18, 2016, 3:29am UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378 "2016-11-18T03:29:13Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Terry44](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/terry44/32/175_2.png) [@Terry44](https://forum.pinegrow.com/u/Terry44)
#### Post date: [November 18, 2016, 3:29am UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/1 "2016-11-18T03:29:13Z")

</div>

Is there a quick way to wrap the href lines with list item tags instead of having to do it manually? Or replace tags with something else like span tags with P tags or div tags with Section tags or whatever?

```
<ul class="list-group">
    <li>
        <a href="#" class="list-group-item">Link</a>
    </li>
    <li><a href="#" class="list-group-item">Link</a></li>
    <a href="#" class="list-group-item active">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
    <a href="#" class="list-group-item">Link</a>
</ul>
```

---

<div class="post-metadata">

### Author: ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [November 18, 2016, 10:11am UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/2 "2016-11-18T10:11:18Z")

</div>

@Terry44 this can be done by selecting the list-group in the DOM and click on the Action menu then edit code. When the code editor opens Command-click (Mac), I assume Control-click (on Windows) at the start of each line you want to edit so that you make a multi-select then just start typing and it will insert the new code on each line. Just make sure you are only selecting the lines you want to edit and remember it will insert it in the same place on each select line. I’ve uploaded a short video to [demonstrate multi-select editing](http://www.invisibleinc.ie/pg/multiselect/multi-select-editing.mp4). Hope you find this to be helpful.

---

<div class="post-metadata">

### Author: ![Terry44](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/terry44/32/175_2.png) [@Terry44](https://forum.pinegrow.com/u/Terry44)
#### Post date: [November 18, 2016, 2:47pm UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/3 "2016-11-18T14:47:31Z")

</div>

No, you’re still doing it manually that way. I want to highlight a line and have it auto-magically surrounded by tags of my choosing or if I hand add the begin tag it should auto close the end tag at the end of the line and not right after the opening tag like it does now. I didn’t know if Pinegrow had this, I don’t see that it does.

---

<div class="post-metadata">

### Author: ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [November 18, 2016, 3:21pm UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/4 "2016-11-18T15:21:47Z")

</div>

@Terry44 If you have Atom installed and the Emmet Package added you can select the line of code and Wrap with Abbreviation and add whatever tag of your choosing. See screenshots.

![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/48d7f98a3bcacfa113c307a13b9a0d5b91609a29.png)

![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/63eb1f02407ae7f0e9c65f85ea4429f0dc4cf652.png)

---

<div class="post-metadata">

### Author: ![Terry44](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/terry44/32/175_2.png) [@Terry44](https://forum.pinegrow.com/u/Terry44)
#### Post date: [November 18, 2016, 3:28pm UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/5 "2016-11-18T15:28:30Z")

</div>

Thanks. I use Brackets and Notepad++. Both have similar plugins available which I use.

I just find it strange that these TO ME basic editing features are not available directly in Pinegrow. The thing I am concerned with in using pinegrow with an external editor is that it reformats the code and I don’t want it’s formatting to contaminate my other code base in the other editor. I am on day 5 of trial so will continue to test and experiment with Pinegrow to see if it is worth it for me to use or not.

---

<div class="post-metadata">

### Author: ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [November 18, 2016, 3:59pm UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/6 "2016-11-18T15:59:42Z")

</div>

Not really what you are asking but try this approach:

1. Add List group from LIB

![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/63bbed693766bf0fc96e57c1623e64c7f0f5b652.png)

1. Double click on text in one of the list items to edit text

![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/8196d66f6c3a22073ea566fc8a6379e38edffed0.png)

1. Click Link in bar

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/7f5e78968ac2564aca2fe10b316f833c7d828272.png)

1. add the URL

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/8c214b7d3e46e53f6bc21159311ecf873034cd4c.png)

**Finished List Group:**  
 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/b60cad820ccd917e89e92ecb7b3f0d6279e74499.png)

Now you can duplicate the li item with the link each time you want to add another one instead of having to do it each time.

---

<div class="post-metadata">

### Author: ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [November 18, 2016, 4:02pm UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/7 "2016-11-18T16:02:40Z")

</div>

> [@Terry44](#):
>
> it should auto close the end tag at the end of the line

One of the issues I would see with this is how do you define the end of the line? Some lines of code can have multiple elements on it so how would any program know where to insert the closing tag correctly.

---

<div class="post-metadata">

### Author: ![Terry44](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/terry44/32/175_2.png) [@Terry44](https://forum.pinegrow.com/u/Terry44)
#### Post date: [November 18, 2016, 4:37pm UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/8 "2016-11-18T16:37:07Z")

</div>

> [@Rob](#):
>
> One of the issues I would see with this is how do you define the end of the line?

The end of the actual line? Dreamweaver does this. OR if you are surrounding an existing tag surround that opening and closing tag… Also if I highlight a section surround the highlighted section. I can do this in the editors I currently have and they are free.

  
[quote="Rob, post:6, topic:378"] Now you can duplicate the li item with the link each time you want to add another one instead of having to do it each time. [/quote]

I see the ability to create your own code blocks and duplicate them and existing ones. What I am saying is if I have existing code and I want to convert a line or multiple lines in the already existing code the only way to do it is the manually do it, line by line, beginning and then at end close the tag myself… line by line. Annoying and very cumbersome and waste of my time.

---

<div class="post-metadata">

### Author: ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [November 18, 2016, 8:42pm UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/9 "2016-11-18T20:42:21Z")

</div>

> [@Terry44](#):
>
> What I am saying is if I have existing code and I want to convert a line or multiple lines in the already existing code the only way to do it is the manually do it, line by line, beginning and then at end close the tag myself… line by line. Annoying and very cumbersome and waste of my time.

Hi @Terry44. I’ve just tried what I suggested here in the [above](http://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/4) reply within Pinegrow and good news it works similar to how Dreamweaver seems to do it as can be seen [here](https://helpx.adobe.com/dreamweaver/how-to/edit-code-view.html?playlist=/ccx/v1/collection/product/dreamweaver/topics/html/collection.ccx.js) at approximately 1:17 in the video. It might not be ideal but its better than having to do it line by line! Give it a try and let me know how you get on with it.

---

<div class="post-metadata">

### Author: ![Terry44](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/terry44/32/175_2.png) [@Terry44](https://forum.pinegrow.com/u/Terry44)
#### Post date: [November 18, 2016, 9:04pm UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/10 "2016-11-18T21:04:44Z")

</div>

That’s nice Rob. I don’t use Atom and if I am going to use another editor why do I need Pinegrow I am thinking to myself.

I am playing more with the visual editing aspect of PG right now and seeing what it can and can’t do. So far I have been coming across quite a few limitations especially in the editor aspect of the program.

Can I install other frameworks into PG like JQuery and JQuery UI or JQuery Mobile and use those the same way bootstrap is being used?

I don’t use frameworks all that often but I will probably use them more if I had a program like this that easily implemented and allowed changing of options for those frameworks. Still playing with the Trial.

---

<div class="post-metadata">

### Author: ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [November 19, 2016, 1:52am UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/11 "2016-11-19T01:52:07Z")

</div>

Out of curiosity how does your current editor(s) handle these things?

---

<div class="post-metadata">

### Author: ![Terry44](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/terry44/32/175_2.png) [@Terry44](https://forum.pinegrow.com/u/Terry44)
#### Post date: [November 19, 2016, 4:19am UTC](https://forum.pinegrow.com/t/quick-way-to-wrap-new-tags-around-existing-html-tags/378/12 "2016-11-19T04:19:44Z")

</div>

In Brackets if you highlight a selection and press ctrl + shift + J a popup appears that lets you enter an opening tag and then the entire selection is surrounded by the opening and closing of that tag.

I also use Emmet in both Notepad++ and Brackets but I prefer Brackets implementation much better because you can test expressions live and really learn the commands and what you can and can’t do with Emmet.

All of the wrapping occurs within a parent tag so if you don’t want to you don’t have to hilight any of the lines you want to wrap it will just wrap everything by default within whatever parent tags you are in. For the most part I just use the keyboard for everything in code editing, I rarely touch the mouse.

I had some custom macros I created also within Notepad++ but after upgrade they disappeared for some reason, there are a lot of line manipulation plugins and functions in NotePad++ that allow you to really create compact code which I am used to.

I mean having multiple lines of code having all the extra white space taken out and joined together on one line with a couple keyboard taps. Then my macros got hosed so now it is not that easy. Now when I am completed with a page I just compress all the lines I can down on to one line which makes for faster loading. I could of just said minimizing the html like JS is minimized for web.

I try to do same for CSS though for some reason sometimes my style sheets don’t work right all minimized so I don’t do this so much for independent CSS style sheets. JS, I can’t manually minimize without it breaking the code, I know there are online minimizers but I am not all that certain they don’t steal your code.

I have no doubt the samething can be done in Atom. I have used it before but I don’t know, I just like Brackets better.
