JQuery Заменить Span на Div

Question

У меня есть элемент html:

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

Я хочу изменить внешний диапазон на div, чтобы он выглядел так:

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

Я проверил онлайн и нашел Решение:

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

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

Однако это не работает. Снимок экрана ниже:

Могу ли я получить помощь?

введите описание изображения здесь

Answer 1

С JQuery это будет выглядеть так:

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

Но имао очень плохая идея назвать id якорь страницы как число.

Ваше решение также не было очень плохо. Просто нужен лучший селектор:

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

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

Answer 2

$('#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>

Answer 3

Span может не содержать div (который, почему вы хотите его изменить?

Также я бы никогда не использовал цифру c ID

Попробуйте это

$("#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>