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

Question

Донат

html , javascript

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

Как мне заменить определённый элемент в коде, найденный по классу или ID, на другой элемент, так чтобы его новое местоположение в родительском элементе оставалось неизменным? Я пытался использовать метод <code>replaceWith</code>, но, кажется, не до конца понял его назначение. Элемент, который я собираюсь вставить, представлен в виде строки с описанием HTML-кода. 

Пример кода: 
<pre><code class="html">&lt;div class="main"&gt;
  &lt;div class="box"&gt;
    &lt;p1&gt;hello&lt;/p1&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre> 

И вот код на JavaScript:
<pre><code class="javascript">const box = document.querySelector('.box')

const box2 = `
&lt;div class="box box2"&gt;
    &lt;p1&gt;hello world&lt;/p1&gt;
  &lt;/div&gt;
`

box.replaceWith(box2)</code></pre>

19 октября 2024 г. 20:32

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для замены одного HTML-элемента на другой с сохранением его местоположения в родительском элементе, нужно использовать метод `replaceWith()`, но с учётом того, что этот метод принимает узел или строку, как аргументы. В вашем случае вы передаёте строку, поэтому сначала вам нужно преобразовать её в узел с помощью метода `createElement` или `innerHTML`.

Вот исправленный пример вашего кода:

```html
<div class="main">
  <div class="box">
    <p>hello</p>
  </div>
</div>

<script>
  const box = document.querySelector('.box');

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

  // Создаем временный элемент, чтобы использовать его для преобразования строки в узлы
  const template = document.createElement('div');
  template.innerHTML = box2.trim(); // Убираем лишние пробелы и переносы

  // Заменяем элемент
  box.replaceWith(...template.childNodes);
</script>
```

Объяснение:

1. Мы создаём временный элемент `<div>` и помещаем в его `innerHTML` вашу строку с HTML-кодом, что позволяет нам получить новые элементы в виде узлов.
2. Используем `trim()` для удаления лишних пробелов в начале и в конце строки.
3. Метод `replaceWith(...)` принимает узлы, поэтому мы используем оператор распространения (`...`), чтобы заменить элемент `.box` на все дочерние узлы, созданные из нашей строки.

Теперь `.box` будет заменен на новый элемент, при этом его местоположение в родительском элементе `div.main` останется прежним.

Answer 2

<a href="https://jsfiddle.net/Lfst8wog/1/" rel="nofollow">https://jsfiddle.net/Lfst8wog/1/</a> <br/> <pre><code class="javascript">const childElement = document.getElementById('child'); // находим потомка
const parentElement = childElement.parentNode; // находим родителя

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

// Заменяем старый элемент на новый
parentElement.replaceChild(newElement, childElement);</code></pre> <br/> <br/> Или так ( <a href="https://jsfiddle.net/Lfst8wog/" rel="nofollow">https://jsfiddle.net/Lfst8wog/</a> ) <br/> <pre><code class="javascript">const oldElement = document.getElementById('old');

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

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