Jak nahradit prvek pomocí JavaScriptu

Chcete-li nahradit prvek DOM jiným prvkem, můžete použít replaceChild() metoda. Tato metoda nahradí podřízený uzel novým uzlem.

Řekněme, že máte následující seznam:

<ul>
        <li>🍔</li>
        <li>🍕</li>
        <li>🍹</li>
        <li>🍲</li>
        <li>🍩</li>
    </ul>

Nyní chcete nahradit poslední položku seznamu jinou položkou. Postupujte podle následujících kroků:

  1. Vyberte cílový prvek, který chcete nahradit.
  2. Vytvořte nový prvek DOM s veškerým potřebným obsahem.
  3. Vyberte nadřazený prvek cílového prvku a nahraďte cílový prvek novým pomocí replaceChild() metoda.

Zde je příklad fragmentu kódu:

// select target target 
const targetItem = document.querySelector('li:last-child');

// create a new element
const newItem = document.createElement('li');
newItem.innerHTML = `🍰`;

// replace `targetItem` with `newItem`
targetItem.parentNode.replaceChild(newItem, targetItem);