Как эффективно заменить текущий HTML элемент на другой?

Question

[MishaXXL]

Есть в коде элемент, который я могу найти по классу или айди.
Как я могу заменить именно этот элемент на другой, чтобы в родительском элементе он не поменял своего местоположения и заменился на месте старого?
Попытался сделать через replaceWith, но видимо не так понял его суть.
Элемент, который будет вставляться - строка, описывающая хтмл код.

<div class="main">
  <div class="box">
    <p1>hello</p1>
  </div>
</div>

const box = document.querySelector('.box')

const box2 = `
<div class="box box2">
    <p1>hello world</p1>
  </div>
`

box.replaceWith(box2)

Answer 1

[Aleksey Solovyev]

https://jsfiddle.net/Lfst8wog/1/

const childElement = document.getElementById('child'); // находим потомка
const parentElement = childElement.parentNode; // находим родителя

// Создаем новый элемент
const newElement = document.createElement('p');
newElement.textContent = 'Новый элемент';

// Заменяем старый элемент на новый
parentElement.replaceChild(newElement, childElement);

Или так (https://jsfiddle.net/Lfst8wog/)

const oldElement = document.getElementById('old');

// Создаем новый элемент
const newElement = document.createElement('div');
newElement.textContent = 'Новый элемент';

// Заменяем старый элемент новым
oldElement.replaceWith(newElement);

const oldElement = document.getElementById('old');

oldElement.replaceWith(document.createRange().createContextualFragment(`
  <div class="box box2">
    <p1>hello world</p1>
  </div>
`));

Comments

[MishaXXL]

У меня элементы строкового формата хтмл, без createElement.

const box2 = `
<div class="box box2">
    <p1>hello world</p1>
  </div>
`

[Aleksey Solovyev]

MishaXXL, https://jsfiddle.net/efosz9ph/

const oldElement = document.getElementById('old');

oldElement.replaceWith(document.createRange().createContextualFragment(`
  <div class="box box2">
    <p1>hello world</p1>
  </div>
`));

[MishaXXL]

Aleksey Solovyev, интересная цепочка событий )

Answer 2

[0xD34F]

элемент.insertAdjacentHTML('afterend', разметка);
элемент.remove();

// или

элемент.outerHTML = разметка;

Comments

[MishaXXL]

А что по скорости быстрее работает или оба одинаково?

[0xD34F]

MishaXXL, предлагаю вам проверить это самостоятельно.

[MishaXXL]

0xD34F, как оно замеряется? )

[0xD34F]

MishaXXL, окей, гугл.