162

मैं DOM में एक तत्व को बदलना चाह रहा हूँ।
उदाहरण के लिए, एक <a>तत्व है जिसे मैं एक जगह से बदलना चाहता हूं <span>।

मैं कैसे जाऊंगा और वह करूंगा?

javascript dom

9

target.replaceWith(element);यह करने के लिए आधुनिक (ES5 +) तरीका है

— जिबोल्ट

2

@ Gibolt DOM कल्पना ES के साथ क्या है? इसके अलावा, यह अभी तक DOM मानक का हिस्सा नहीं है, जबकि ES5 9 साल पहले जारी किया गया था।

— पिशिश

ES5 + का मतलब है ES5 या लेटर। भले ही ES5 9 साल पुराना है, बाद के संस्करण पुराने नहीं हैं।

— जस्टिनसीबी

यदि आप अभी भी StackOverflow का उपयोग करते हैं, तो यह नीचे दिए गए नए मानक उत्तर को चुनने के लायक है।

— मिकेमाकाना

202

प्रतिस्थापन का उपयोग करके () :

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

— ब्योर्न
स्रोत

7

यह उदाहरण काम नहीं करेगा। आपको इसे काम करने के लिए शरीर के अंत में स्क्रिप्ट ब्लॉक रखना चाहिए। इसके अलावा, सिर्फ मनोरंजन के लिए: ऑपरेशन के बाद लाइन [अलर्ट (myAnchor.innerHTML)] को जोड़ने का प्रयास करें।

— KooiInc

एंकर इन्टरटेक्स्ट में स्टैकऑवरफ्लो के साथ स्पेलिंग मिस्टेक करता है

— राहुल

8

क्या होगा अगर यह रूट html एलिमेंट है

— lisak

शुक्रिया @Bjorn Tipling मैंने एक एलिमेंट और फंक्शन को

— रिप्लेस एलिमेंट में

65

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

ए एक प्रतिस्थापित ए तत्व है।

— Kamarey
स्रोत

1

@ ब्योर्न Tipling से जवाब वास्तव में काम नहीं करता है। KooiInc के लिए यह सही (सही!) उत्तर है, सही भी है, टिप्पणी करें। अब यह काम कर रहा है! ;-) दोनों के लिए टीएक्स!

— पेड्रो फरेरा

4

निश्चित रूप से आप एक योग्य नाम के अलावा एक चर नाम के साथ आ सकते हैं

— quemeful

61

`A.replaceWith(span)` - माता-पिता की जरूरत नहीं

सामान्य रूप:

target.replaceWith(element);

पिछले पद्धति की तुलना में बेहतर / स्वच्छ तरीका।

आपके उपयोग के मामले के लिए:

A.replaceWith(span);

मोज़िला डॉक्स

समर्थित ब्राउज़र्स - 94% अप्रैल 2020

— Gibolt
स्रोत

13

IE11 या एज 14 (अब: 2016-11-16) में समर्थित नहीं है।

— जोर

3

ES5 में बदलने के लिए Google के क्लोजर या किसी अन्य ट्रांसपिलर का उपयोग करने का प्रयास करें। ब्राउजर सपोर्ट के आधार पर आपको पुराना कोड नहीं लिखना चाहिए, अगर आपके पास बेहतर, अधिक रख-रखाव का विकल्प है

— गिब्लेट

1

इस प्रकार रोपाई। आप सभी को एक में अनुकूलित, छोटा और परिवर्तित कर सकते हैं। इसे देखें: Developers.google.com/closure/compiler

— Gibolt

4

मुझे लगता है कि यदि चुनाव उपयोग कोड के बीच है जो सभी ब्राउज़रों पर काम करता है जो मैं समर्थन करने की कोशिश कर रहा हूं, या क्लोजर का उपयोग करने के लिए आपकी पूरी निर्माण प्रक्रिया को फिर से टूल कर रहा हूं, तो मैं उन सभी ब्राउज़र पर काम करने वाले कोड का उपयोग करूंगा जो मैं समर्थन करने की कोशिश कर रहा हूं। ।

— cdmckay

5

@ जोर I थोड़े संभव के रूप में कई ब्राउज़रों का समर्थन करने के लिए सहमत हैं, लेकिन मैं अपने कोड को केवल इसलिए अस्वीकार करने से इनकार करता हूं क्योंकि IE या एज अधूरे हैं या बस "अलग होना चाहते हैं"। मानक हैं, अगर वे उनका पालन नहीं करते हैं और कुछ लोग इसका समर्थन करते हैं, तो यह उनकी समस्या है, जिससे हमें वेब डेवलपर्स के रूप में प्रभावित नहीं होना है।

— डेविड टैबरेरो एम।

4

यह प्रश्न बहुत पुराना है, लेकिन मैंने खुद को Microsoft प्रमाणन के लिए अध्ययन किया, और अध्ययन पुस्तिका में इसका उपयोग करने का सुझाव दिया गया:

oldElement.replaceNode(newElement)

मैंने इसे देखा और यह केवल IE में समर्थित होने के लिए लगता है। रवींद्र ..

मुझे लगा कि मैं इसे एक मज़ेदार साइड नोट के रूप में यहाँ जोड़ दूंगा;)

— Zeliax
स्रोत

2

मेरे पास एक समान मुद्दा था और यह धागा मिला। बदलें ने मेरे लिए काम नहीं किया, और माता-पिता द्वारा जाना मेरी स्थिति के लिए मुश्किल था। इनर एचटीएमएल ने बच्चों को बदल दिया, जो कि मैं भी नहीं चाहता था। आउटरएचटीएमएल के इस्तेमाल से काम हो गया। मनाइए कि यह किसी और के लिए सहायक हो!

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

— शॉन
स्रोत

0

आप एक नोड का उपयोग करके बदल सकते हैं Node.replaceWith(newNode)।

इस उदाहरण को मूल नोड से सभी विशेषताओं और बच्चों को रखना चाहिए:

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

— नुरुल हुदा
स्रोत

-1

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

— किरिल
स्रोत

-1

माता-पिता को खोजने के बिना पहले से प्रस्तावित विकल्पों में सबसे आसान समाधान दिया गया है:

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

— बिना अधिकार के सार्वजनिक भूमि पर अधिकार करनेवाला
स्रोत

जावास्क्रिप्ट का उपयोग करके डोम तत्व को कैसे बदला जाए?

A.replaceWith(span) - माता-पिता की जरूरत नहीं

`A.replaceWith(span)` - माता-पिता की जरूरत नहीं