[JS] IE 전용 DOM 확장 메소드 applyElement() 를 다른 브라우저에서도 사용하기 - 객체 바깥에 새로운 객체 추가

설명

• applyElement() 함수는 객체의 바깥에 객체를 추가해 줍니다.
  　
• 예제의 버튼을 누르게 되면 DIV 객체가 이미지의 외곽에 생성/추가 됩니다. 계속 버튼을 누를 경우 안쪽의 DIV 객체 테두리 색상이 점점 진해지게 됩니다. 잘못 보면 appendChild() 와 다를바 없어 보이지만, 이미지 객체의 바깥에 객체를 추가한다는게 중요합니다.
  객체의 모습을 자세히 살펴보려면, FireFox의 'Dom Inspector' 같은 프로그램으로 확인 가능합니다.
  
• 원래 applyElement() 메소드는 IE 전용 DOM 확장 메소드입니다. 따라서 다른 브라우저에서는 지원하지 않기 때문에 사용이 불가능합니다.
  이 메소드는 안쪽과 바깥쪽에 해당 객체를 추가할 수 있는데, W3C에서 권장하는 대체 메소드는 appendChild() 입니다. 그런데, 이 메소드는 해당 객체의 안쪽에만 추가가 가능하고, 특정 위치를 지정하기가 까다롭기 때문에 사용에 제한이 있습니다.
  
• 아래 환경에서 모두 작동 합니다.
  IE 5.5, IE 6, IE 7, IE 8b1, FF 2, FF 3, Safari 3.0(Win), Safari 3.1(Win), Opera 9.26, Opera 9.5, Konqueror 3.5.7

예제

• 
  

코드

/**
 * @함수 applyElement()
 * @설명 IE 전용 DOM 확장 메소드 applyElement()를 다른 브라우저에서 사용
 * @사용 applyElement(object 변경할객체, object 추가할객체)
 * @param (object) oTarget  적용할 대상 객체
 * @param (object) oElement  추가할 객체
 * @return (void)
 */
function applyElement(oTarget, oElement) {
    var oParent = oTarget.parentNode;
    var oClone = oTarget.cloneNode(true);
        oElement.appendChild(oClone);
        oParent.replaceChild(oElement,obj);
}

/**
 * cloneNode 를 사용하지 않고 더 간단하게
 * by Seeker
 */
function applyElement(oTarget, oElement) {
    var oParent = oTarget.parentNode;
        oParent.insertBefore(oElement,oTarget);
        oElment.appendChild(oTarget);
}

참고 사이트

• Microsoft MSDN : applyElement Method