Javascript를 사용하여 DOM 요소를 대체하려면 어떻게 해야 합니까?
DOM의 요소를 교환하려고 합니다.
예를 들면,<a>대체하고 싶은 요소<span>대신.
내가 어떻게 가서 그걸 하겠어?
replace Child()를 사용하여 다음을 수행합니다.
<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>
A.replaceWith(span) - 부모 불필요
일반 양식:
target.replaceWith(element)
이전 방법보다 훨씬 우수하고 깨끗합니다.
사용 예:
A.replaceWith(span)
고도의 사용법
- 여러 값을 전달할 수 있습니다(또는 산포 연산자 사용).
...). - 임의의 문자열 값이 텍스트 요소로 추가됩니다.
예:
// Initially [child1, target, child3]
target.replaceWith(span, "foo") // [child1, span, "foo", child3]
const list = ["bar", span]
target.replaceWith(...list, "fizz") // [child1, "bar", span, "fizz", child3]
안전한 취급null타깃
타겟이 null이 될 가능성이 있는 경우 newish를 사용하는 것을 고려할 수 있습니다.?. 옵션 체인 연산자.대상이 존재하지 않으면 아무 일도 일어나지 않습니다.자세한 것은 이쪽.
target?.replaceWith?.(element)
관련 DOM 방식
지원 대상 브라우저 - 22년2월 96 %
var a = A.parentNode.replaceChild(document.createElement("span"), A);
a는 치환된A 요소입니다
이 질문은 매우 오래되었지만, Microsoft 인증을 받기 위해 공부하고 있는 자신을 발견했고, 학습서에서는 다음과 같은 질문을 사용할 것을 제안했습니다.
oldElement.replaceNode(newElement)
검색해보니 IE에서만 지원되는 것 같아요.도...
그냥 재밌는 쪽지로 여기에 넣어야겠다고 생각했어요;)
저도 비슷한 문제가 있어서 이 실을 찾았습니다.교체는 제게는 효과가 없었고, 부모님 곁으로 가는 것은 제 처지에 있어서 어려웠습니다.내부 HTML이 아이들을 대신했고, 그것도 내가 원하는 것이 아니었다.외부 사용HTML이 작업을 완료했습니다.이게 다른 사람에게 도움이 되길 바라!
currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>
교환할 수 있습니다.HTML Element또는Node사용.Node.replaceWith(newNode).
이 예에서는 오리진노드에서 모든 Atribute와 서브를 유지해야 합니다.
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)
})
다음과 같은 요소가 있는 경우:
<a href="#link-1">Link 1</a>
<a href="#link-2">Link 2</a>
<a href="#link-3">Link 3</a>
<a href="#link-4">Link 4</a>
위의 코드를 실행하면 다음 요소가 나타납니다.
<span href="#link-1">Link 1</span>
<span href="#link-2">Link 2</span>
<span href="#link-3">Link 3</span>
<span href="#link-4">Link 4</span>
새 요소()createElement를 만든 후 대상 요소의 상위 요소에서 를 사용할 수 있습니다.
const newElement = document.createElement(/*...*/);
const target = document.getElementById("my-table");
target.parentNode.replaceChild(newElement, target);
새 요소의 시작점이 HTML인 경우 부모(또는 현대 환경에서는 요소 자체)에서 를 사용할 수 있습니다.
const target = document.getElementById("my-table");
target.insertAdjacentHTML("afterend", theHTMLForTheNewElement);
target.parentNode.removeChild(target); // Or: `target.remove()`
가장 좋은 방법이야.부모도 필요 없다.그냥 사용하다Element.outerHTML = template;
// Get the current element
var currentNode = document.querySelector('#greeting');
// Replace the element
currentNode.outerHTML =
'<div id="salutations">' +
'<h1>Hi, universe!</h1>' +
'<p>The sun is always shining!</p>' +
'</div>';
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);
}
}
이미 제안된 옵션에서 부모를 찾지 않고 가장 쉬운 해결책을 제시합니다.
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);
언급URL : https://stackoverflow.com/questions/843680/how-to-replace-dom-element-in-place-using-javascript
'programing' 카테고리의 다른 글
| Java 스크립트의 배열에서 하위 하위 개체의 키 값을 매핑하는 방법 (0) | 2022.10.03 |
|---|---|
| 일식이 시작되지 않음 - Java 가상 시스템을 찾을 수 없습니다. (0) | 2022.10.03 |
| C에서의 템플릿 시뮬레이션(큐 데이터 타입의 경우) (0) | 2022.10.03 |
| MySQL의 기본 ON DELETE 동작은 무엇입니까? (0) | 2022.10.03 |
| Python 문자열에서 HTML 제거 (0) | 2022.10.03 |