Bagaimana cara mengganti elemen DOM di tempat menggunakan Javascript?

162

Saya mencari untuk mengganti elemen di DOM.
Misalnya, ada <a>elemen yang ingin saya ganti dengan yang <span>sebaliknya.

Bagaimana saya akan pergi dan melakukan itu?

javascript dom Oh Tuhan
sumber
9
target.replaceWith(element);adalah cara (ES5 +) modern untuk melakukan ini
Gibolt
2
@Gibolt Apa spec DOM dengan ES? Selain itu, ini belum menjadi bagian dari standar DOM, sementara ES5 dirilis 9 tahun yang lalu.
pishpish
ES5 + berarti ES5 ATAU KEMUDIAN. Bahkan jika ES5 berusia 9 tahun, versi yang lebih baru TIDAK setua itu.
JustinCB
Jika Anda masih menggunakan StackOverflow, sebaiknya Anda memilih jawaban standar baru di bawah ini.
mikemaccana

Jawaban:

202

dengan menggunakan 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
sumber
7
contoh ini tidak akan berfungsi. Anda harus meletakkan blok skrip di ujung tubuh untuk membuatnya bekerja. Selanjutnya, hanya untuk bersenang-senang: coba tambahkan baris [lansiran (myAnchor.innerHTML)] setelah operasi.
KooiInc
Ada kesalahan pengejaan dengan StackOverflow di jangkar innerText
rahul
8
bagaimana jika itu adalah elemen html root
lisak
Terima kasih @Bjorn Tipling. Saya telah membuat pertanyaan tindak lanjut tentang cara menambahkan id dan fungsi ke elemen yang diganti, di sini: stackoverflow.com/questions/15670261/…
JDelage
65 
var a = A.parentNode.replaceChild(document.createElement("span"), A);

a adalah elemen A yang diganti.

Kamarey
sumber
1
Jawaban dari @Bjorn Tipling sebenarnya tidak berfungsi. Ini adalah jawaban (benar!) Untuk KooiInc, juga benar, komentar. Sekarang berhasil! ;-) Tx untuk keduanya!
Pedro Ferreira
4
tentunya Anda bisa membuat nama variabel selain A lol
quemeful
61

A.replaceWith(span) - Tidak perlu orang tua

Bentuk umum:

target.replaceWith(element);

Jauh lebih baik / lebih bersih dari metode sebelumnya.

Untuk kasus penggunaan Anda:

A.replaceWith(span);

Mozilla Docs

Browser yang Didukung - 94% Apr 2020

Gibolt
sumber
13
Tidak didukung di IE11 atau Edge 14 (sekarang: 2016-11-16).
jor
3
Coba gunakan Penutupan Google atau transpiler lain untuk mengonversi ke ES5. Anda tidak boleh menulis kode lama berdasarkan dukungan peramban, jika Anda memiliki opsi yang lebih baik, lebih bisa dikelola
Gibolt
1
Demikian transpiling. Anda dapat mengoptimalkan, meminimalkan, dan mengonversi semua menjadi satu. Lihat ini: developers.google.com/closure/compiler
Gibolt
4
Saya pikir jika pilihannya adalah antara menggunakan kode yang berfungsi di semua browser yang saya coba dukung, atau alat ulang seluruh proses build Anda untuk menggunakan Penutupan, saya akan memilih kode penggunaan yang berfungsi di semua browser yang saya coba dukung .
cdmckay
5
@jor Saya agak setuju untuk mendukung sebanyak mungkin browser, tetapi saya menolak untuk membuat ulang kode saya hanya karena IE atau Edge tidak lengkap atau hanya "ingin tampil beda". Ada standar, jika mereka tidak mengikuti mereka dan beberapa orang mendukungnya, itu adalah masalah mereka, yang tidak harus mempengaruhi kita sebagai pengembang web.
David Tabernero M.
4

Pertanyaan ini sudah sangat lama, tetapi saya mendapati diri saya belajar untuk Sertifikasi Microsoft, dan dalam buku studi disarankan untuk menggunakan: 

oldElement.replaceNode(newElement)

Saya mencarinya dan tampaknya hanya didukung di IE. Doh ..

Saya pikir saya hanya akan menambahkannya di sini sebagai catatan samping yang lucu;)

Zeliax
sumber
2

Saya memiliki masalah serupa dan menemukan utas ini. Ganti tidak bekerja untuk saya, dan pergi oleh orang tua sulit untuk situasi saya. Html batin menggantikan anak-anak, yang juga bukan yang saya inginkan. Menggunakan outerHTML menyelesaikan pekerjaan. Semoga ini bisa membantu orang lain!

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

Anda dapat mengganti Node menggunakan Node.replaceWith(newNode).

Contoh ini harus menjaga semua atribut dan childs dari node asal:

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)
})
Nurul Huda
sumber
-1

Contoh untuk mengganti elemen 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
sumber
-1

Dengan opsi yang sudah diusulkan, solusi termudah tanpa menemukan orangtua:

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);
Penghuni liar
sumber