162

ฉันต้องการแทนที่องค์ประกอบใน DOM
ตัวอย่างเช่นมี<a>องค์ประกอบที่ฉันต้องการแทนที่ด้วย<span>แทน

ฉันจะไปและทำอย่างนั้นได้อย่างไร

javascript dom

— พระเจ้าช่วย
แหล่งที่มา

9

target.replaceWith(element);เป็นวิธีการที่ทันสมัย (ES5 +) ในการทำเช่นนี้

— Gibolt

2

@Gibolt สเป็ค DOM มีอะไรกับ ES? นอกจากนี้ยังไม่ได้เป็นส่วนหนึ่งของมาตรฐาน DOM ในขณะที่ ES5 เปิดตัวเมื่อ 9 ปีที่แล้ว

— pishpish

ES5 + หมายถึง ES5 หรือต่อมา แม้ว่า ES5 อายุ 9 ปีรุ่นที่ใหม่กว่าจะไม่เก่า

— JustinCB

หากคุณยังคงใช้ StackOverflow คุณควรเลือกคำตอบมาตรฐานใหม่ด้านล่าง

— mikemaccana

202

โดยใช้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
แหล่งที่มา

7

ตัวอย่างนี้ไม่ทำงาน คุณควรวางบล็อกสคริปต์ไว้ที่ส่วนท้ายของร่างกายเพื่อให้ทำงานได้ นอกจากนี้เพื่อความสนุก: ลองเพิ่มบรรทัด [การแจ้งเตือน (myAnchor.innerHTML)] หลังการดำเนินการ

— KooiInc

เอาใจใส่ความผิดพลาดการสะกดคำที่มี StackOverflow ในการยึด innerText

— rahul

8

จะเกิดอะไรขึ้นถ้ามันเป็นองค์ประกอบ html รูท

— lisak

ขอบคุณ @Bjorn Tipling ฉันได้สร้างคำถามติดตามเกี่ยวกับวิธีเพิ่ม id และฟังก์ชั่นในองค์ประกอบที่ถูกแทนที่ที่นี่: stackoverflow.com/questions/15670261/…

— JD บอดี้

65

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

a คือองค์ประกอบ A ที่ถูกแทนที่

— Kamarey
แหล่งที่มา

1

คำตอบจาก @Bjorn Tipling จริง ๆ แล้วไม่ทำงาน นี่คือคำตอบ (ที่ถูกต้อง!) สำหรับ KooiInc และยังถูกต้องแสดงความคิดเห็น ตอนนี้มันใช้งานได้! ;-) Tx ถึงทั้งคู่!

— Pedro Ferreira

4

แน่นอนคุณอาจมีชื่อตัวแปรอื่นที่ไม่ใช่ A lol

— quemeful

61

`A.replaceWith(span)` - ไม่ต้องใช้พาเรนต์

แบบฟอร์มทั่วไป:

target.replaceWith(element);

วิธีที่ดีกว่า / สะอาดกว่าวิธีก่อนหน้า

สำหรับกรณีการใช้งานของคุณ:

A.replaceWith(span);

เอกสาร Mozilla

เบราว์เซอร์ที่รองรับ - 94% เม.ย. 2020

— Gibolt
แหล่งที่มา

13

ไม่รองรับใน IE11 หรือ Edge 14 (ตอนนี้: 2016-11-16)

— jor

3

ลองใช้การปิดของ Google หรือ transpiler อื่นเพื่อแปลงเป็น ES5 คุณไม่ควรเขียนโค้ดเก่าตามการสนับสนุนของเบราว์เซอร์ถ้าคุณมีตัวเลือกที่ดีกว่าและบำรุงรักษาได้ดีกว่า

— Gibolt

1

ดังนั้นการ transpiling คุณสามารถปรับขนาดย่อให้เล็กสุดและแปลงให้เหลือทั้งหมดในที่เดียว ลองดู: developers.google.com/closure/compiler

— Gibolt

4

ฉันคิดว่าถ้าตัวเลือกอยู่ระหว่างรหัสการใช้งานที่ใช้ได้กับเบราว์เซอร์ทั้งหมดที่ฉันพยายามให้การสนับสนุนหรือจัดทำกระบวนการสร้างทั้งหมดของคุณเพื่อใช้การปิดฉันจะเลือกรหัสการใช้งานที่ใช้ได้กับเบราว์เซอร์ทั้งหมดที่ฉันพยายามให้การสนับสนุน .

— cdmckay

5

@jor ฉันตกลงที่จะสนับสนุนเบราว์เซอร์ให้ได้มากที่สุดเท่าที่จะเป็นไปได้ แต่ฉันปฏิเสธที่จะทำใหม่รหัสของฉันเพียงเพราะ IE หรือ Edge ไม่สมบูรณ์หรือเพียงแค่ "ต้องการแตกต่าง" มีมาตรฐานหากพวกเขาไม่ปฏิบัติตามพวกเขาและมีคนไม่กี่คนที่สนับสนุนมันนั่นคือปัญหาของพวกเขาที่ไม่ต้องส่งผลกระทบต่อเราในฐานะนักพัฒนาเว็บ

— David Tabernero M.

4

คำถามนี้เก่ามาก แต่ฉันพบว่าตัวเองกำลังศึกษาเพื่อรับใบรับรอง Microsoft และในหนังสือการศึกษาแนะนำให้ใช้:

oldElement.replaceNode(newElement)

ฉันค้นหามันและดูเหมือนว่าจะรองรับเฉพาะใน IE Doh ..

ฉันคิดว่าฉันจะเพิ่มที่นี่เป็นบันทึกด้านตลก;)

— Zeliax
แหล่งที่มา

2

ฉันมีปัญหาที่คล้ายกันและพบกระทู้นี้ การแทนที่ไม่ได้ผลสำหรับฉันและการดำเนินการโดยผู้ปกครองนั้นยากสำหรับสถานการณ์ของฉัน Inner Html แทนที่เด็ก ๆ ซึ่งไม่ใช่สิ่งที่ฉันต้องการ การใช้ outerHTML ทำให้งานเสร็จ หวังว่านี่จะช่วยคนอื่นได้!

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

— ฌอน
แหล่งที่มา

0

คุณสามารถแทนที่ Node โดยใช้ 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);

— ผู้ตั้งถิ่นฐานในที่สาธารณะ
แหล่งที่มา

จะแทนที่องค์ประกอบ DOM โดยใช้ Javascript ได้อย่างไร

A.replaceWith(span) - ไม่ต้องใช้พาเรนต์

`A.replaceWith(span)` - ไม่ต้องใช้พาเรนต์