162

আমি ডিওমের একটি উপাদান প্রতিস্থাপন করতে চাই।
উদাহরণস্বরূপ, এখানে এমন একটি <a>উপাদান রয়েছে যা আমি <span>তার পরিবর্তে প্রতিস্থাপন করতে চাই ।

আমি কিভাবে গিয়ে তা করব?

javascript dom

— ঈশ্বর
সূত্র

9

target.replaceWith(element);এটি করার আধুনিক (ES5 +) উপায়

— গিবল্ট

2

@ গিবল্ট ES এর সাথে ডোম স্পেকের কী আছে? তদুপরি, এটি এখনও ডিওএম স্ট্যান্ডার্ডের একটি অংশ নয়, যখন ইএস 5 9 বছর আগে প্রকাশিত হয়েছিল।

— pishpish

ES5 + এর অর্থ ES5 বা লেটার। এমনকি ES5 9 বছর বয়সী হলেও পরবর্তী সংস্করণগুলি পুরানো নয়।

— জাস্টিনসিবি

আপনি যদি এখনও স্ট্যাক ওভারফ্লো ব্যবহার করেন তবে এটি নীচে নতুন মানক উত্তরটি বাছাইয়ের উপযুক্ত।

— মাইকমেকানা

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

এই উদাহরণ কাজ করবে না। এটিকে কাজ করতে আপনার শরীরের শেষে স্ক্রিপ্ট ব্লক করা উচিত। তদতিরিক্ত, কেবল মজাদার জন্য: অপারেশনের পরে লাইনটি [সতর্কতা (myAunchor.innerHTML)] যুক্ত করার চেষ্টা করুন।

— KooiInc

Theres Stackoverflow সঙ্গে একটি বানান ভুল নোঙ্গর innerText মধ্যে

— রাহুল

8

এটি যদি মূল এইচটিএমএল উপাদান হয় তবে

— জুনক

আপনাকে ধন্যবাদ জর্জ টিপলিং। : আমি কিভাবে প্রতিস্থাপিত উপাদান, এখানে একটি আইডি এবং একটি ফাংশন যোগ করার জন্য একটি প্রশ্ন ফলো আপ তৈরি করেছি stackoverflow.com/questions/15670261/...

— JDelage

65

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

একটি প্রতিস্থাপিত একটি উপাদান।

— Kamarey
সূত্র

1

@ জর্ন টিপলিংয়ের উত্তর আসলে কার্যকর হয় না। এটিই কোচিঙ্কের (সঠিক!) উত্তর, সঠিকও, মন্তব্য করুন। এখন এটা কাজ করছে! ;-) উভয়কেই টিএক্স!

— পেড্রো

4

অবশ্যই আপনি

— কাইমুলফুল

61

`A.replaceWith(span)` - কোন পিতামাতার প্রয়োজন নেই

জেনেরিক ফর্ম:

target.replaceWith(element);

আগের পদ্ধতির তুলনায় ওয়ে ভাল / ক্লিনার।

আপনার ব্যবহারের ক্ষেত্রে:

A.replaceWith(span);

মজিলা ডক্স

সমর্থিত ব্রাউজারগুলি - 94% এপ্রিল 2020

— Gibolt
সূত্র

13

আইই 11 বা এজ 14 এ সমর্থিত নয় (এখন: 2016-11-16)।

— জোর

3

ইএস 5 তে রূপান্তর করতে গুগলের ক্লোজার বা অন্য কোনও ট্রান্সপ্লার ব্যবহার করে দেখুন। ব্রাউজার সমর্থনের ভিত্তিতে আপনার পুরানো কোডটি লেখা উচিত নয়, যদি আপনার কাছে আরও ভাল, আরও রক্ষণাবেক্ষণযোগ্য বিকল্প থাকে

— গিবল্ট

1

এইভাবে রোপণ। আপনি একসাথে সমস্তকে অনুকূলিত করতে, সংশোধন করতে এবং ডাউন-রূপান্তর করতে পারেন। এটি পরীক্ষা করে দেখুন: developers.google.com/closure/compiler

— গিবল্ট

4

আমি মনে করি যে পছন্দটি যদি এমন সমস্ত ব্যবহারকারীর কোডের মধ্যে হয়ে থাকে যা আমি সমর্থন করতে চাইছি এমন সমস্ত ব্রাউজারগুলিতে কাজ করে, বা আপনার সম্পূর্ণ বিল্ড প্রক্রিয়াটি বন্ধ করার জন্য পুনরায় সরঞ্জাম করে নিয়েছি, তবে আমি যে ব্রাউজারগুলিকে সমর্থন করতে চাইছি সেগুলিকে ব্যবহার করার কোডটি বেছে নেব ।

— সিডিএমকেই

5

@ জোজোর আমি যতটা সম্ভব ব্রাউজারকে সমর্থন করতে রাজি আছি তবে আইই বা এজ অসম্পূর্ণ থাকায় বা "আলাদা হতে চাই" কারণ আমি আমার কোডটি পুনরায় তৈরি করতে অস্বীকার করি। মান রয়েছে, যদি তারা তাদের অনুসরণ না করে এবং কয়েক জন এটি সমর্থন করে তবে এটি তাদের সমস্যা, যা ওয়েব বিকাশকারী হিসাবে আমাদের প্রভাবিত করতে হবে না।

— ডেভিড তাবারনারো এম।

4

এই প্রশ্নটি অনেক পুরানো, তবে আমি নিজেকে একটি মাইক্রোসফ্ট শংসাপত্রের জন্য পড়াশোনা করতে দেখেছি এবং স্টাডি বইতে এটি ব্যবহার করার পরামর্শ দেওয়া হয়েছিল:

oldElement.replaceNode(newElement)

আমি এটি সন্ধান করেছি এবং এটি কেবল আইই সমর্থিত বলে মনে হচ্ছে। ডোহ ..

আমি ভেবেছিলাম আমি এটি এখানে একটি মজার দিকের নোট হিসাবে যুক্ত করব;)

— 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

এলআই উপাদানগুলির প্রতিস্থাপনের উদাহরণ

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

— Squatter
সূত্র

জাভাস্ক্রিপ্ট ব্যবহার করে DOM উপাদানটি কীভাবে প্রতিস্থাপন করবেন?

A.replaceWith(span) - কোন পিতামাতার প্রয়োজন নেই

`A.replaceWith(span)` - কোন পিতামাতার প্রয়োজন নেই