162

DOM의 요소를 바꾸려고합니다.
예를 들어 대신 대신 <a>바꾸려 는 요소가 <span>있습니다.

내가 어떻게합니까?

javascript dom

— omg
소스

9

target.replaceWith(element);이 작업을 수행하는 현대 (ES5 +) 방법입니다

— Gibolt

2

@Gibolt ES 사양은 ES와 무엇입니까? 또한 ES5는 9 년 전에 출시 된 반면 DOM 표준의 일부는 아닙니다.

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

— 비요른
소스

7

이 예제는 작동하지 않습니다. 스크립트 블록을 본문 끝에 배치하여 작동 시키십시오. 또한 재미를 위해서 : 작업 후에 [alert (myAnchor.innerHTML)] 줄을 추가해보십시오.

— KooiInc

앵커 innerText와의 프로그래머에 StackOverflow와 맞춤법 실수를

— 라훌

8

루트 HTML 요소 인 경우

— lisak

@Bjorn Tipling에게 감사합니다. 교체 된 요소에 ID와 함수를 추가하는 방법에 대한 후속 질문을 작성했습니다. stackoverflow.com/questions/15670261/…

— JDelage

65

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

a는 대체 된 A 요소입니다.

— 카마 레이
소스

1

@Bjorn Tipling의 답변은 실제로 작동하지 않습니다. 이것은 KooiInc에 대한 (올바른!) 답변입니다. 이제 작동합니다! ;-) 둘 다 Tx!

— Pedro Ferreira

4

확실히 당신은 A lol 이외의 변수 이름을 생각해 낼 수 있습니다

— 39 초

61

`A.replaceWith(span)` -부모가 필요하지 않습니다

일반적인 형태 :

target.replaceWith(element);

이전 방법보다 더 나은 / 깨끗한 방법.

사용 사례 :

A.replaceWith(span);

모질라 문서

지원되는 브라우저 -2020 년 4 월 94 %

— 지 볼트
소스

13

IE11 또는 Edge 14에서 지원되지 않습니다 (현재 : 2016-11-16).

— JOR

3

Google Closure 또는 다른 변환기를 사용하여 ES5로 변환하십시오. 더 나은 유지 관리 옵션이 있다면 브라우저 지원을 기반으로 오래된 코드를 작성해서는 안됩니다.

— Gibolt

1

따라서 트랜스 필링. 한 번에 모두 최적화, 축소 및 하향 변환 할 수 있습니다. 확인해보세요 : developers.google.com/closure/compiler

— Gibolt

4

지원하려는 모든 브라우저에서 작동하는 사용 코드 사이에서 선택하거나 클로저를 사용하도록 전체 빌드 프로세스를 다시 도구화하는 경우 지원하려는 모든 브라우저에서 작동하는 사용 코드를 선택합니다. .

— cdmckay

5

@jor 나는 가능한 한 많은 브라우저를 지원하는 데 동의하지만 IE 또는 Edge가 불완전하거나 "다른 것이기를 원하기 때문에"코드를 다시 작성하는 것을 거부합니다. 표준을 따르지 않으면 표준을 따르고 몇몇 사람들이 표준을지지합니다. 문제는 웹 개발자로서 우리에게 영향을 미치지 않아도됩니다.

— David Tabernero M.

4

이 질문은 매우 오래되었지만 Microsoft 인증을 위해 공부하고 있다는 것을 알았으며 연구 서적에서 다음을 사용하는 것이 좋습니다.

oldElement.replaceNode(newElement)

나는 그것을 찾았고 IE에서만 지원되는 것 같습니다. 도 ..

나는 여기에 재미있는 사이드 노트로 추가 할 것이라고 생각했다.)

— 젤리아
소스

2

비슷한 문제가 있었고이 스레드를 발견했습니다. 대체는 저에게 효과가 없었으며 부모님이가는 것은 상황에 어려웠습니다. Int Html은 아이들을 대신했습니다. outerHTML을 사용하여 작업을 완료했습니다. 이것이 다른 누군가를 돕기를 바랍니다!

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

— 쪼그리고 앉는 사람
소스

Javascript를 사용하여 DOM 요소를 대체하는 방법은 무엇입니까?

A.replaceWith(span) -부모가 필요하지 않습니다

`A.replaceWith(span)` -부모가 필요하지 않습니다