JavaScript를 사용하여 DIV_javascript 기술로 텍스트 요소 노드 래핑

애플리케이션이 특정 JavaScript 라이브러리에 의존하는 경우 언어가 아닌 라이브러리 자체의 문제를 무심코 해결하려고 하는 것입니다. 텍스트(HTML 요소도 포함할 수 있음)를 DIV 요소로 래핑하려고 할 때와 같습니다. 다음 HTML이 있다고 가정해 보겠습니다.

This is some text and <a href="">a link</a>

이때 아래와 같이 변환하고 싶다면

<div>This is some text and <a href="">a link</a><div>

가장 간단한 무차별 대입 방법은 상위 요소의 .innerHTML 속성을 통해 업데이트를 수행할 수 있다는 것입니다. 그러나 문제는 innerHTML을 사용하면 HTML 요소가 다시 생성되므로 바인딩된 모든 이벤트 리스너가 유효하지 않게 된다는 것입니다. 정말 큰 유리네요! 따라서 현재로서는 이를 달성하기 위해 JavaScript만 사용할 수 있습니다. 눈금자는 짧고 인치는 길다. 구현 코드는 다음과 같습니다.

var newWrapper = document.createElement('div'); 
while(existingParent.firstChild) { 
// 移动DOM元素,不会创建新元素 
newWrapper.appendChild(existingParent.firstChild); 
}

여기서는 For 루프를 사용할 수 없습니다. childNodes는 동적 노드의 모음이고 노드를 이동하면 해당 인덱스 값에 영향을 미치기 때문입니다. while 루프를 사용하여 상위 요소의 firstChild를 계속 확인합니다. false를 나타내는 값이 반환되면 모든 노드가 새 상위 요소로 이동되었음을 알 수 있습니다.