162

Tôi đang tìm cách thay thế một phần tử trong DOM.
Ví dụ, có một <a>yếu tố mà tôi muốn thay thế bằng một <span>thay thế.

Làm thế nào tôi sẽ đi và làm điều đó?

javascript dom

— Chúa ơi
nguồn

9

target.replaceWith(element);là cách hiện đại (ES5 +) để làm điều này

— Gibolt

2

@Gibolt Thông số DOM có gì với ES? Hơn nữa, nó chưa phải là một phần của tiêu chuẩn DOM, trong khi ES5 đã được phát hành 9 năm trước.

— pishpish

ES5 + có nghĩa là ES5 HOẶC LATER. Ngay cả khi ES5 đã 9 tuổi, các phiên bản mới hơn KHÔNG phải là cũ.

— JustinCB

Nếu bạn vẫn sử dụng StackOverflow, bạn nên chọn câu trả lời tiêu chuẩn mới bên dưới.

— mikemaccana

202

bằng cách sử dụng thayChild () :

<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
nguồn

7

ví dụ này sẽ không hoạt động. Bạn nên đặt khối kịch bản ở cuối cơ thể để làm cho nó hoạt động. Hơn nữa, chỉ để giải trí: hãy thử thêm dòng [alert (myAnchor.innerHTML)] sau khi hoạt động.

— KooiInc

Có một lỗi chính tả với StackOverflow trong phần bên trong neo

— rahul

8

Điều gì xảy ra nếu đó là phần tử html gốc

— lisak

Cảm ơn bạn @Bjorn Tipling. Tôi đã tạo một câu hỏi tiếp theo về cách thêm id và hàm vào phần tử được thay thế, tại đây: stackoverflow.com/questions/15670261/

— Kẻ

65

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

a là phần tử A được thay thế.

— Kamarey
nguồn

1

Trả lời từ @Bjorn Tipling trong thực tế không hoạt động. Đây là câu trả lời (đúng!) Cho KooiInc, cũng đúng, bình luận. Bây giờ nó hoạt động! ;-) Tx cho cả hai!

— Pedro Ferreira

4

chắc chắn bạn có thể đã nghĩ ra một cái tên khác ngoài A lol

— bấy

61

`A.replaceWith(span)` - Không cần cha mẹ

Hình thức chung:

target.replaceWith(element);

Cách tốt hơn / sạch hơn phương pháp trước.

Đối với trường hợp sử dụng của bạn:

A.replaceWith(span);

Tài liệu Mozilla

Trình duyệt được hỗ trợ - 94% tháng 4 năm 2020

— Giáp
nguồn

13

Không được hỗ trợ trong IE11 hoặc Edge 14 (hiện tại: 2016-11-16).

— Jor

3

Hãy thử sử dụng Google Clos hoặc một bộ chuyển đổi khác để chuyển đổi sang ES5. Bạn không nên viết mã cũ dựa trên hỗ trợ trình duyệt, nếu bạn có tùy chọn tốt hơn, dễ bảo trì hơn

— Gibolt

1

Do đó dịch mã. Bạn có thể tối ưu hóa, thu nhỏ và chuyển đổi tất cả trong một. Hãy xem thử: developers.google.com/clenses/compiler

— Gibolt

4

Tôi nghĩ rằng nếu lựa chọn là giữa mã sử dụng hoạt động trên tất cả các trình duyệt tôi đang cố gắng hỗ trợ hoặc sử dụng lại toàn bộ quá trình xây dựng của bạn để sử dụng Đóng, tôi sẽ chọn sử dụng mã hoạt động trên tất cả các trình duyệt mà tôi đang cố gắng hỗ trợ .

— cdmckay

5

@jor Tôi đồng ý hỗ trợ càng nhiều trình duyệt càng tốt, nhưng tôi từ chối làm lại mã của mình chỉ vì IE hoặc Edge không hoàn chỉnh hoặc chỉ "muốn khác biệt". Có những tiêu chuẩn, nếu họ không tuân theo chúng và một vài người ủng hộ nó, đó là vấn đề của họ, điều đó không phải ảnh hưởng đến chúng tôi với tư cách là nhà phát triển web.

— David Tabernero M.

4

Câu hỏi này rất cũ, nhưng tôi thấy mình đang học Chứng nhận Microsoft và trong cuốn sách nghiên cứu, nó đã được đề xuất sử dụng:

oldElement.replaceNode(newElement)

Tôi đã tra cứu nó và dường như nó chỉ được hỗ trợ trong IE. Đừng ..

Tôi nghĩ rằng tôi chỉ cần thêm nó ở đây như là một ghi chú bên vui;)

— Zeliax
nguồn

2

Tôi đã có một vấn đề tương tự và tìm thấy chủ đề này. Thay thế đã không làm việc cho tôi, và đi bởi cha mẹ là khó khăn cho tình huống của tôi. Html bên trong đã thay thế những đứa trẻ, đó cũng không phải là điều tôi muốn. Sử dụng bên ngoàiHTML đã hoàn thành công việc. Hy vọng điều này sẽ giúp người khác!

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

— Sean
nguồn

0

Bạn có thể thay thế một nút bằng cách sử dụng Node.replaceWith(newNode).

Ví dụ này sẽ giữ tất cả các thuộc tính và con từ nút gốc:

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

— Y tá Huda
nguồn

-1

Ví dụ để thay thế các phần tử 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
nguồn

-1

Đưa ra các tùy chọn đã được đề xuất là giải pháp đơn giản nhất mà không cần tìm cha 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);

— Tiếng kêu
nguồn

Làm cách nào để thay thế phần tử DOM tại chỗ bằng Javascript?

A.replaceWith(span) - Không cần cha mẹ

`A.replaceWith(span)` - Không cần cha mẹ