162

Sto cercando di sostituire un elemento nel DOM.
Ad esempio, c'è un <a>elemento che voglio sostituire con un <span>invece.

Come andrei a farlo?

javascript dom

— Oh mio Dio
fonte

9

target.replaceWith(element);è il modo moderno (ES5 +) per farlo

— Gibolt,

2

@Gibolt Cosa hanno le specifiche DOM con ES? Inoltre, non fa ancora parte dello standard DOM, mentre ES5 è stato rilasciato 9 anni fa.

— Pishpish

ES5 + significa ES5 O DOPO. Anche se ES5 ha 9 anni, le versioni successive NON sono così vecchie.

— JustinCB,

Se usi ancora StackOverflow vale la pena scegliere la nuova risposta standard di seguito.

— mikemaccana,

202

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

7

questo esempio non funzionerebbe. Dovresti mettere il blocco di script alla fine del corpo per farlo funzionare. Inoltre, solo per divertimento: prova ad aggiungere la riga [alert (myAnchor.innerHTML)] dopo l'operazione.

— KooiInc,

C'è un errore di ortografia con StackOverflow nell'ancora innerText

— rahul

8

e se fosse l'elemento html di root

— lisak il

Grazie @Bjorn Tipling. Ho creato un follow-up domanda su come aggiungere un ID e una funzione per l'elemento sostituito, qui: stackoverflow.com/questions/15670261/...

— JDelage

65

var a = A.parentNode.replaceChild(document.createElement("span"), A);

a è l'elemento A sostituito.

— Kamarey
fonte

1

La risposta di @Bjorn Tipling infatti non funziona. Questa è la risposta (corretta!) Per KooiInc, anche corretto, commento. Ora funziona! ;-) Tx ad entrambi!

— Pedro Ferreira,

4

sicuramente avresti potuto trovare un nome variabile diverso da A lol

— quemeful

61

`A.replaceWith(span)` - Nessun genitore necessario

Forma generica:

target.replaceWith(element);

Molto meglio / più pulito del metodo precedente.

Per il tuo caso d'uso:

A.replaceWith(span);

Mozilla Docs

Browser supportati - 94% aprile 2020

— Gibolt
fonte

13

Non supportato in IE11 o Edge 14 (ora: 16/11/2016).

— jor

3

Prova a utilizzare la chiusura di Google o un altro transpiler per convertire in ES5. Non dovresti scrivere il vecchio codice basato sul supporto del browser, se hai un'opzione migliore e più

— gestibile

1

Così traspilando. Puoi ottimizzare, minimizzare e convertire verso il basso tutto in uno.

— Dai

4

Penso che se la scelta è tra usare il codice che funziona su tutti i browser che sto cercando di supportare, o ri-tool l'intero processo di compilazione per usare Closure, sceglierei il codice che funziona su tutti i browser che sto cercando di supportare .

— cdmckay,

5

@jor Sono d'accordo di supportare il maggior numero possibile di browser, ma mi rifiuto di rifare il mio codice solo perché IE o Edge sono incompleti o semplicemente "vogliono essere diversi". Ci sono standard, se non li seguono e alcune persone lo supportano, questo è il loro problema, che non deve influenzarci come sviluppatori web.

— David Tabernero M.

4

Questa domanda è molto antica, ma mi sono ritrovato a studiare per una certificazione Microsoft e nel libro di studio è stato suggerito di usare:

oldElement.replaceNode(newElement)

Ho cercato e sembra essere supportato solo in IE. Doh ..

Ho pensato di aggiungerlo qui come una nota a margine divertente;)

— Zeliax
fonte

2

Ho avuto un problema simile e ho trovato questa discussione. Sostituire non ha funzionato per me, e andare dal genitore è stato difficile per la mia situazione. Inner HTML ha sostituito i bambini, che non era nemmeno quello che volevo. L'uso di outerHTML ha portato a termine il lavoro. Spero che questo aiuti qualcun altro!

currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>

— Sean
fonte

0

È possibile sostituire un HTML Elemento NodeutilizzandoNode.replaceWith(newNode) .

Questo esempio dovrebbe mantenere tutti gli attributi e i figli dal nodo di 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)
})

Se hai questi elementi:

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

Dopo aver eseguito i codici sopra, finirai con questi elementi:

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

-1

Esempio per la sostituzione di elementi 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
fonte

-1

Date le opzioni già proposte la soluzione più semplice senza trovare un genitore:

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

— occupante abusivo
fonte

Come sostituire l'elemento DOM sul posto usando Javascript?

A.replaceWith(span) - Nessun genitore necessario

`A.replaceWith(span)` - Nessun genitore necessario