162

DOM bir öğeyi değiştirmek için arıyorum.
Örneğin, bunun yerine <a>değiştirmek istediğim bir öğe var <span>.

Bunu nasıl yapabilirim?

javascript dom

— Aman Tanrım
kaynak

9

target.replaceWith(element);bunu yapmanın modern (ES5 +) yolu

— Gibolt

2

@Gibolt DOM spec'in ES ile neleri var? Dahası, henüz DOM standardının bir parçası değil, ES5 9 yıl önce piyasaya sürüldü.

— pishpish

ES5 +, ES5 VEYA DAHA anlamına gelir. ES5 9 yaşında olsa bile, sonraki sürümler o kadar eski DEĞİLDİR.

— JustinCB

Hala StackOverflow kullanıyorsanız, aşağıdaki yeni standart cevabı seçmeye değer.

— mikemaccana

202

replaceChild () kullanarak :

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

7

bu örnek işe yaramaz. Çalışmasını sağlamak için kod bloğunu vücudun sonuna koymalısınız. Ayrıca, sadece eğlence için: işlemden sonra [alert (myAnchor.innerHTML)] satırını eklemeyi deneyin.

— KooiInc

Çapa iç kısmında StackOverflow ile bir yazım hatası var. Metin

— rahul

8

ne kök html element ise

— lisak

Teşekkürler @Bjorn Tipling. Değiştirilen öğeye nasıl bir kimlik ve bir işlev ekleneceği ile ilgili bir takip sorusu oluşturdum: stackoverflow.com/questions/15670261/…

— JDelage

65

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

a, değiştirilen A öğesidir.

— Kamarey
kaynak

1

@Bjorn tarafından cevap Tipling aslında çalışmıyor. Bu KooiInc için de (doğru!) Cevap, ayrıca doğru, yorum. Şimdi çalışıyor! ;-) Her ikisine de Tx!

— Pedro Ferreira

4

şüphesiz sen A lol dışında bir değişken adı ile gelebilirdi

— quemeful

61

`A.replaceWith(span)` - Ebeveyn gerekmez

Genel form:

target.replaceWith(element);

Önceki yönteme göre çok daha iyi / temiz.

Kullanım durumunuz için:

A.replaceWith(span);

Mozilla Belgeleri

Desteklenen Tarayıcılar - 94% Nis 2020

— Gibolt
kaynak

13

IE11 veya Edge 14'te desteklenmez (şimdi: 2016-11-16).

— jor

3

ES5'e dönüştürmek için Google'ın Kapanışını veya başka bir aktarıcıyı kullanmayı deneyin. Daha iyi, daha sürdürülebilir bir seçeneğiniz varsa tarayıcı desteğine dayalı eski kod

— yazmamalısınız

1

Böylece aktarılıyor. Tümünü bir arada optimize edebilir, küçültebilir ve aşağı dönüştürebilirsiniz.

— Şuna

4

Ben desteklemeye çalıştığım tüm tarayıcılar üzerinde çalışan kullanım kodu veya Kapatma kullanmak için tüm oluşturma işlemi yeniden aracı arasında seçim olduğunu düşünüyorum, ben desteklemeye çalıştığım tüm tarayıcılarda çalışan kullanım kodu seçin düşünüyorum .

— cdmckay

5

@jor Ben mümkün olduğunca çok sayıda tarayıcı desteklemeyi kabul ediyorum, ama sadece IE veya Edge eksik veya sadece "farklı olmak istiyorum" nedeniyle kodumu yeniden reddetme. Onları takip etmiyorlarsa ve birkaç kişi destekliyorsa, web geliştiricileri olarak bizi etkilemek zorunda olmayan bu onların sorunu.

— David Tabernero M.

4

Bu soru çok eski, ama kendimi bir Microsoft Sertifikasyonu için çalışırken buldum ve çalışma kitabında kullanılması önerildi:

oldElement.replaceNode(newElement)

Ben baktı ve sadece IE destekleniyor gibi görünüyor. Doh ..

Ben sadece burada komik bir yan not olarak eklemek olacağını düşündüm;)

— Zeliax
kaynak

2

Benzer bir sorun vardı ve bu konu bulundu. Değiştir benim için işe yaramadı ve ebeveyn tarafından gitmek benim durumum için zordu. Inner Html çocukları da değiştirdi. OuterHTML kullanmak işi tamamladı. Umarım bu başka birine yardımcı olur!

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

— Sean
kaynak

0

Kullanarak bir Düğümü değiştirebilirsiniz Node.replaceWith(newNode).

Bu örnek, tüm öznitelikleri ve alt öğeleri başlangıç düğümünden korumalıdır:

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
kaynak

-1

LI öğelerini değiştirmek için örnek

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
kaynak

-1

Zaten önerilen seçenekler göz önüne alındığında, bir ebeveyn bulmadan en kolay çözüm:

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

— gecekonducu
kaynak

Javascript kullanarak yerinde DOM öğesi nasıl değiştirilir?

A.replaceWith(span) - Ebeveyn gerekmez

`A.replaceWith(span)` - Ebeveyn gerekmez