Comment remplacer l'élément DOM en place en utilisant Javascript?

162

Je cherche à remplacer un élément dans le DOM.
Par exemple, il y a un <a>élément que je souhaite remplacer par un <span>.

Comment pourrais-je y aller et faire ça?

javascript dom OMG
la source
9
target.replaceWith(element);est la façon moderne (ES5 +) de le faire
Gibolt
2
@Gibolt Qu'est-ce que les spécifications DOM ont avec ES? De plus, il ne fait pas encore partie du standard DOM, alors que ES5 est sorti il ​​y a 9 ans.
pishpish
ES5 + signifie ES5 OU PLUS TARD. Même si ES5 a 9 ans, les versions ultérieures ne sont PAS aussi anciennes.
JustinCB
Si vous utilisez toujours StackOverflow, il vaut la peine de choisir la nouvelle réponse standard ci-dessous.
mikemaccana

Réponses:

202

en utilisant replaceChild () :

<html>
<head>
</head>
<body>
  <div>
    <a id="myAnchor" href="http://www.stackoverflow.com">StackOverflow</a>
  </div>
<script type="text/JavaScript">
  var myAnchor = document.getElementById("myAnchor");
  var mySpan = document.createElement("span");
  mySpan.innerHTML = "replaced anchor!";
  myAnchor.parentNode.replaceChild(mySpan, myAnchor);
</script>
</body>
</html>
Bjorn
la source
7
cet exemple ne fonctionnerait pas. Vous devez mettre le bloc de script à la fin du corps pour le faire fonctionner. De plus, juste pour le plaisir: essayez d'ajouter la ligne [alert (myAnchor.innerHTML)] après l'opération.
KooiInc
Il y a une faute d'orthographe avec StackOverflow dans l'ancre innerText
rahul
8
et si c'est un élément html racine
lisak
Merci @Bjorn Tipling. J'ai créé une question de suivi sur la façon d'ajouter un identifiant et une fonction à l'élément remplacé, ici: stackoverflow.com/questions/15670261
...
65 
var a = A.parentNode.replaceChild(document.createElement("span"), A);

a est l'élément A remplacé.

Kamarey
la source
1
La réponse de @Bjorn Tipling en fait ne fonctionne pas. C'est la réponse (correcte!) Pour KooiInc, également correcte, commentaire. Maintenant ça marche! ;-) Tx aux deux!
Pedro Ferreira
4
vous auriez sûrement pu trouver un nom de variable autre que A lol
quemeful
61

A.replaceWith(span) - Aucun parent nécessaire

Forme générique:

target.replaceWith(element);

Bien mieux / plus propre que la méthode précédente.

Pour votre cas d'utilisation:

A.replaceWith(span);

Documents Mozilla

Navigateurs pris en charge - 94% avril 2020

Gibolt
la source
13
Non pris en charge dans IE11 ou Edge 14 (maintenant: 16/11/2016).
jor
3
Essayez d'utiliser Google's Closure ou un autre transpilateur pour convertir en ES5. Vous ne devriez pas écrire d'anciens codes basés sur la prise en charge du navigateur, si vous avez une option meilleure et plus maintenable
Gibolt
1
Ainsi transpilant. Vous pouvez optimiser, réduire et réduire tout en un. Découvrez-le: developer.google.com/closure/compiler
Gibolt
4
Je pense que si le choix est entre utiliser un code qui fonctionne sur tous les navigateurs que j'essaie de prendre en charge, ou ré-outiller tout votre processus de construction pour utiliser Closure, je choisirais d'utiliser un code qui fonctionne sur tous les navigateurs que j'essaie de prendre en charge .
cdmckay
5
@jor J'accepte un peu de prendre en charge autant de navigateurs que possible, mais je refuse de refaire mon code simplement parce que IE ou Edge sont incomplets ou simplement "veulent être différents". Il y a des normes, si elles ne les suivent pas et que quelques personnes les soutiennent, c'est leur problème, qui n'ont pas à nous affecter en tant que développeurs Web.
David Tabernero M.
4

Cette question est très ancienne, mais je me suis retrouvé à étudier pour une certification Microsoft, et dans le livre d'étude, il a été suggéré d'utiliser: 

oldElement.replaceNode(newElement)

Je l'ai recherché et il semble être uniquement pris en charge dans IE. Doh ..

Je pensais que je l'ajouterais juste ici comme une note amusante;)

Zeliax
la source
2

J'ai eu un problème similaire et j'ai trouvé ce fil. Remplacer n'a pas fonctionné pour moi, et passer par le parent était difficile pour ma situation. Inner Html a remplacé les enfants, ce qui n'était pas non plus ce que je voulais. L'utilisation de externalHTML a fait le travail. J'espère que ceci aide quelqu'un d'autre!

currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>
Sean
la source
0

Vous pouvez remplacer un HTML Elementou en Nodeutilisant Node.replaceWith(newNode).

Cet exemple doit conserver tous les attributs et fils du nœud 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 avez 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 vous retrouverez avec ces éléments:

<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>
Nurul Huda
la source
-1

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);
    }
}
Kirill
la source
-1

Compte tenu des options déjà proposées, la solution la plus simple sans trouver de 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);
Squatter
la source