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
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

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
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
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
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
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
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
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
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
source

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

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

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