DOM의 요소를 바꾸려고합니다.
예를 들어 대신 대신 <a>바꾸려 는 요소가 <span>있습니다.
내가 어떻게합니까?
답변
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>답변
var a = A.parentNode.replaceChild(document.createElement("span"), A);a는 대체 된 A 요소입니다.
답변
A.replaceWith(span) -부모가 필요하지 않습니다
일반적인 형태 :
target.replaceWith(element);이전 방법보다 더 나은 / 깨끗한 방법.
사용 사례 :
A.replaceWith(span);지원되는 브라우저 -2020 년 4 월 94 %
답변
이 질문은 매우 오래되었지만 Microsoft 인증을 위해 공부하고 있다는 것을 알았으며 연구 서적에서 다음을 사용하는 것이 좋습니다.
oldElement.replaceNode(newElement)나는 그것을 찾았고 IE에서만 지원되는 것 같습니다. 도 ..
나는 여기에 재미있는 사이드 노트로 추가 할 것이라고 생각했다.)
답변
비슷한 문제가 있었고이 스레드를 발견했습니다. 대체는 저에게 효과가 없었으며 부모님이가는 것은 상황에 어려웠습니다. Int Html은 아이들을 대신했습니다. outerHTML을 사용하여 작업을 완료했습니다. 이것이 다른 누군가를 돕기를 바랍니다!
currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>답변
를 사용하여 노드를 교체 할 수 있습니다 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)
})답변
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);
}
}