With JQuery it will look like this:

var nestedSpan = $('#4 span:first');
var nestedSpanText = nestedSpan.text();
nestedSpan.replaceWith('<div>' + nestedSpanText + '</div>');

But imao it is very bad idea to name id page anchor as number.

Your solution also was not so bad. Just needed better selector:

var nestedSpan = $('#4 span:first');

nestedSpan.replaceWith(function() {
    return '<div>'+$(this).html()+'</div>';
});

Span may not contain a div (which I why you want to change it?

Also I would never use a numeric ID

Try this

$("#Span4").replaceWith(function() {
  return $("<div/>", {
    "style": this.getAttribute("style"),
    "id": this.id
  }).html($(this).html());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="Span4" style="display: block">
  <div>
    <span>ttttttt</span>
    <p>ttttttt</p>
  </div>
</span>

$('#4 div').unwrap().wrap('<div id="4" style="display: block;"></div>');

$('#4 div').unwrap().wrap('<div id="4" style="display: block;"></div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="4" style="display: block">
  <div>
    <span>ttttttt</span>
    <p>ttttttt</p>
  </div>
</span>

I have a html element:

<span id="4" style="display: block">
  <div>
    <span>ttttttt</span>
    <p>ttttttt</p>
  </div>
</span>

I want to change the outermost span to div, so it looks like:

<div id="4" style="display: block">
  <div>
    <span>ttttttt</span>
    <p>ttttttt</p>
  </div>
</div>

I checked online and find a solution:

var myNodes = $('[type="type1"]')

myNodes[0].replaceWith(function() {
return '<div>'+$(this).html()+'</div>';
});

However, it does not work. Screenshot below:

Can I get some help?

enter image description here