Q:

jquery: replace element a with span

for information: it's a mobile (off-canvas) menu and it's not visible in page source.  it's only visible in mobile view with "code inspector" etc.  the page i'm talking about
my code:
 $('.mm-listview li:(:nth-child(2)) .mm-next+a').replace('span');​

my html:
 <ul class="mm-listview">
 <li><a class="mm-next" href="#mm-2" data-target="#mm-2"></a>
 <a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a>
 </li>
 <li><a class="mm-next" href="#mm-3" data-target="#mm-3"></a>
 <a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
 </li>

it doesn't replace at the moment.  i know, it should be something simple...

A:

Use replaceWith() with callback then generate span with the content and update.  Also your selector is invalid so change li:(:nth-child(2)) to li:nth-child(2) for making it valid. 

 $('.mm-listview li:nth-child(2) .mm-next+a').replaceWith(function() {
   return '<span>' + $(this).text() + '</span>'
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
my html:

<ul class="mm-listview">
  <li>
    <a class="mm-next" href="#mm-2" data-target="#mm-2"></a>
    <a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a>
  </li>
  <li>
    <a class="mm-next" href="#mm-3" data-target="#mm-3"></a>
    <a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
  </li>
</ul>

Or you can use unwrap() and wrap() methods. 

$('.mm-listview li:nth-child(2) .mm-next+a').contents().unwrap().wrap('<span/>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
my html:

<ul class="mm-listview">
  <li>
    <a class="mm-next" href="#mm-2" data-target="#mm-2"></a>
    <a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a>
  </li>
  <li>
    <a class="mm-next" href="#mm-3" data-target="#mm-3"></a>
    <a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
  </li>
</ul>

If you don't want to maintain the element content then use  replaceWith() with the new content. 

$('.mm-listview li:nth-child(2) .mm-next+a').replaceWith('<span/>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
my html:

<ul class="mm-listview">
  <li>
    <a class="mm-next" href="#mm-2" data-target="#mm-2"></a>
    <a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a>
  </li>
  <li>
    <a class="mm-next" href="#mm-3" data-target="#mm-3"></a>
    <a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
  </li>
</ul>

UPDATE : There is an additional character after the code just remove it. Check your console you can see the error. 

Uncaught SyntaxError: Invalid or unexpected token

You can see it in the below image at the end as a red mark.