Comment remplacer un élément du DOM en place en utilisant Javascript ?

Question

Je cherche à remplacer un élément dans le DOM.
Par exemple, il existe un <a> que je veux remplacer par un élément <span> à la place.

Comment pourrais-je faire ça ?

Answer 1

Vous pouvez remplacer un HTML Element o Node en utilisant Node.replaceWith(newNode) .

Cet exemple devrait conserver tous les attributs et enfants du noeud d'origine :

const links = document.querySelectorAll('a')

links.forEach(link => {
  const replacement = document.createElement('span')

  // copy attributes
  for (let i = 0; i < link.attributes.length; i++) {
     const attr = link.attributes[i]
     replacement.setAttribute(attr.name, attr.value)
  }

  // copy content
  replacement.innerHTML = link.innerHTML

  // or you can use appendChild instead
  // link.childNodes.forEach(node => replacement.appendChild(node))

  link.replaceWith(replacement)
})

Si vous disposez de ces éléments :

<a href="#link-1">Link 1</a>
<a href="#link-2">Link 2</a>
<a href="#link-3">Link 3</a>
<a href="#link-4">Link 4</a>

Après avoir exécuté les codes ci-dessus, vous obtiendrez les éléments suivants :

<span href="#link-1">Link 1</span>
<span href="#link-2">Link 2</span>
<span href="#link-3">Link 3</span>
<span href="#link-4">Link 4</span>

Answer 2

Vous pouvez utiliser replaceChild sur le parent de l'élément cible après avoir créé votre nouvel élément ( createElement ) :

const newElement = document.createElement(/*...*/);
const target = document.getElementById("my-table");
target.parentNode.replaceChild(newElement, target);

Si votre point de départ pour le nouvel élément est HTML, vous pouvez utiliser insertAdjacentHTML et ensuite removeChild sur le parent (ou remove sur l'élément lui-même, dans les environnements modernes) :

const target = document.getElementById("my-table");
target.insertAdjacentHTML("afterend", theHTMLForTheNewElement);
target.parentNode.removeChild(target); // Or: `target.remove()`

Answer 3

La meilleure façon de le faire. Pas besoin de parents. Il suffit d'utiliser Element.outerHTML = template;

// Get the current element
var currentNode = document.querySelector('#greeting');

// Replace the element
currentNode.outerHTML =
    '<div id="salutations">' +
        '<h1>Hi, universe!</h1>' +
        '<p>The sun is always shining!</p>' +
    '</div>';

Answer 4

Exemple de remplacement d'éléments LI

function (element) {
    let li = element.parentElement;
    let ul = li.parentNode;   
    if (li.nextSibling.nodeName === 'LI') {
        let li_replaced = ul.replaceChild(li, li.nextSibling);
        ul.insertBefore(li_replaced, li);
    }
}

Answer 5

Compte tenu des options déjà proposées, la solution la plus simple sans trouver un parent :

var parent = document.createElement("div");
var child = parent.appendChild(document.createElement("a"));
var span = document.createElement("span");

// for IE
if("replaceNode" in child)
  child.replaceNode(span);

// for other browsers
if("replaceWith" in child)
  child.replaceWith(span);

console.log(parent.outerHTML);