How to use Resharper's Structured Search to add a new div which is 3 levels deep?

Question

For example, in the below html, find all div tags with class equal to bar and also have a parent div equal to foo.

// leave this code alone
<div class="bar">
  Hello World!
</div>

// Do a structured find and replace on this code only
<div class="foo">
  <div class="bar">
    Hello World Again!
  </div>
</div>

Here is the resharper search pattern I'm using and it produces no results:

<div class="foo"><div class="bar">$content$</div></div>

The replace pattern should add an additional, nested div with a class of baz:

<div class="foo"><div class="bar"><div class="baz">$content$</div></div></div>

Answer 1

Your approach seems correct. It worked for me, for example define the pattern like this

Use replace and we get

Answer 2

There is no reason for your search pattern not to work.

This is your code

// leave this code alone
<div class="bar">
  Hello World!
</div>

// Do a structured find and replace on this code only
<div class="foo">
  <div class="bar">
    Hello World Again!
  </div>
</div>

and you tried with

<div class="foo"><div class="bar">$content$</div></div>

If you still can't match the search

Make sure you changed the Search Pattern to HTML

Try to change the search pattern in proper format as shown below (which may be a hard case. But you can try)

<div class="foo">
  <div class="bar">
    $content$
  </div>
</div>

Alternatively you can try

<$tag$ class="foo">
  <$tag$ class="bar">
    $content$
  </$tag$>
</$tag$>