web-dev-qa-db-fra.com

Comment remplacer un élément DOM sur place avec Javascript?

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

Comment pourrais-je aller faire ça?

javascriptdom
141
omg

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>
189
Bjorn Tipling
var a = A.parentNode.replaceChild(document.createElement("span"), A);

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

63
Kamarey

A.replaceWith(span) - Aucun parent requis

Forme générique:

target.replaceWith(element);

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

Pour votre cas d'utilisation:

A.replaceWith(span);

Mozilla Docs

Navigateurs pris en charge - 86% nov. 2018

40
Gibolt

Cette question est très ancienne, mais je me suis retrouvée à étudier pour obtenir une certification Microsoft. Dans le cahier d'étude, il était suggéré d'utiliser: 

oldElement.replaceNode(newElement)

Je l'ai regardé et cela ne semble être supporté que dans IE. Doh ..

Je pensais que je voudrais juste l'ajouter ici comme une note de côté amusante;)

3
Zeliax

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);
    }
}
0
Kirill

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 ce que je voulais non plus. Avec outerHTML, le travail est fait. 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>
0
Sean

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);
0
Squatter