Заменить элемент завернутым новым

Question

Я хочу заменить старый элемент обернутым новым.

Я начинаю так:

<div>Some text
  <span id="old"></span>
</div>

И я хочу это:

<div>Some text
  <span>
    <a></a>
  </span>
</div>

Мне удается заменить старый элемент на новый следующим образом:

var elementA = document.querySelector('#old')
var elementB = document.createElement("a")
elementA.before(elementB)
elementA.remove()

Результат:

<div>Some text
  <a></a>
</div>

Но пока я не могу обернуть новый элемент. Я безуспешно пытался переопределить Element.outerHTML и jQuery wrap(). Есть идеи, пожалуйста?

РЕДАКТИРОВАТЬ: Я заметил, что слишком упростил свой вариант использования ... вот более точный код:

var elementA = document.querySelector('#old')
var elementB = document.createElement("a")

// Here I do manipulations on elementB: add classes, set Id, set attributes, set innerHTML, etc.

elementA.before(elementB)
elementA.remove()

Итак, elementB действительно является «элементом» (или узел?), а не только HTML. Может быть, я могу превратить этот элемент в необработанный HTML и вставить его в оболочку с помощью innerHTML в соответствии с предложениями ниже? Если вы хотите посмотреть фактический код , вот он .

Answer 1

Вы можете попробовать следующее:

Вам не нужно менять HTML для этого ...

var elementA = document.querySelector('#old');
var elementB = document.createElement("span");
elementB.innerHTML = '<span></span>';
elementA.before(elementB);
elementA.remove()

Answer 2

var elementA = document.querySelector('#old')
var elementB = document.createElement("span")
elementB.innerHTML = '<span></span>';
elementA.before(elementB)
elementA.remove()

<div>Some text
  <span id="old"></span>
</div>