div 요소를 부모로 삽입하십시오.

Question

다음과 같은 것이 가능한지 궁금합니다. dom 요소가 있고 div에이 요소를 래핑하려고합니다. 그래서 div 요소와 그것의 부모 사이에 삽입됩니다. 그런 다음 div가 요소의 새로운 부모가됩니다.

그러나 일을 복잡하게 다른 곳에서 우리는 이미 같은 것들을 수행 한 : 시험 ID는 사업부에서 warapped 할 수있는 요소의 자식입니다

var testElement = document.getElementByID('testID') 

합니다. 우리가 삽입 한 후에도 여전히 testElement가 유효 할 것입니까?

현재 : jquery를 사용하고 있지 않습니다.

아이디어가 있으십니까?

감사합니다,

AJ

Answer 1

을 당신은 replaceChild^[docs]를 사용할 수 있습니다

// `element` is the element you want to wrap 
var parent = element.parentNode; 
var wrapper = document.createElement('div'); 

// set the wrapper as child (instead of the element) 
parent.replaceChild(wrapper, element); 
// set element as child of wrapper 
wrapper.appendChild(element); 

을만큼 당신이 (요소를 파괴하고 생성하는), (REFE)를 innerHTML를 사용하지 않는 한 기존 DOM 요소에 대한 변경 사항은 변경되지 않습니다. 여기

var wrapper = document.createElement('div'); 
var myDiv = document.getElementById('myDiv'); 
wrapper.appendChild(myDiv.cloneNode(true)); 
myDiv.parentNode.replaceChild(wrapper, myDiv); 

Answer 2

당신이 다음 표준 DOM 메소드 (그리고 innerHTML을)를 사용하여 조작을하고있는 가정 - 예.

약 이동 요소는 직접 참조를 끊지 않습니다.

당신은 아마 같은 것을 원하는 (당신이 innerHTML을 사용하고 있던 경우에, 당신은 새로운 콘텐츠 당신이 그 속성을 설정 한 요소의 내용을 파괴하고 만드는 것) :

var oldParent = document.getElementById('foo'); 
var oldChild = document.getElementById('bar'); 
var wrapper = document.createElement('div'); 
oldParent.appendChild(wrapper); 
wrapper.appendChild(oldChild); 

Answer 3

가 ... 또 다른 예입니다 만 새로운 요소는 그 자식 요소 중 '모든'주위에 래핑합니다.

필요에 따라이 값을 변경하여 다른 범위로 줄 바꿈 할 수 있습니다. 이 특정 주제에 대한 많은 논평은 없으므로 모두에게 도움이되기를 바랍니다.

var newChildNodes = document.body.childNodes; 
var newElement = document.createElement('div'); 

newElement.className = 'green_gradient'; 
newElement.id = 'content';   

for (var i = 0; i < newChildNodes.length;i++) { 
    newElement.appendChild(newChildNodes.item(i)); 
    newChildNodes.item(0).parentNode.insertBefore(newElement, newChildNodes.item(i)); 
} 

당신은 당신의 새로운 요소의 부모가 될 것입니다 무엇이든 될하기 위해 newChildNodes 변수 '는 document.body'부분을 수정하는 것이 좋습니다. 이 예에서는 래퍼 div를 삽입하기로했습니다. 또한 요소 유형과 id 및 className 값을 업데이트하려고합니다.

Answer 4

이 뭔가를 시도 할 수 순수 JS에서