자바 스크립트에서 HTML 요소를 교체하는 방법은 무엇입니까?

Question

DOM 스크립팅을 위해 고전적인 Javascript를 사용하고 있습니다. 컨테이너 DIV에 DIV 세트가 있습니다. 아이 DIV의의 클릭 이벤트에 , 내가 이벤트가 발생했습니다 자식 DIV가 위의 DIV에 swaped 할 것을 원하는 .. 내 코드가 여기에 표시됩니다 .. DIV 2가 클릭 된 경우

<div id="container"> 
     <div onclick="swapDiv(event);">1</div> 
     <div onclick="swapDiv(event);">2</div> 
     <div onclick="swapDiv(event);">3</div> 
</div> 

가해야 DIV와 교환하십시오 1

Answer 1

이 코드는 선택한 것을 첫 번째 하위 요소로 바꾸려면 원하는대로 수행합니다. 당신이 다른 것을 원한다면 당신은 더 정확하게해야합니다. 그것의 소리에서

<script type="text/javascript"> 

function swapDiv(event,elem){ 
    elem.parentNode.insertBefore(elem,elem.parentNode.firstChild); 
} 

</script> 


<div id="container"> 
     <div onclick="swapDiv(event,this);">1</div> 
     <div onclick="swapDiv(event,this);">2</div> 
     <div onclick="swapDiv(event,this);">3</div> 
</div> 

Answer 2

당신은 기본적으로 그냥 전 사업부의 previousSibling와 ERGO와 사업부를 교환하고 싶습니다. insertBefore을 보면서 새로운 요소를 만드는 대신 기존 요소를 사용하는 방법을 사용할 수 있습니다. 첨부 된 이벤트에 어떤 일이 발생하는지 확실하지 않습니다. 제대로 복사해야합니다.

Answer 3

요소의 parentNode 속성은 부모 노드를 제공합니다. 요소에는 다른 참조 요소 앞에 요소를 삽입하는 insertBefore 함수가 있습니다.이 요소가 이미 트리의 다른 위치에 있으면 이동합니다. 노드에는 이전 형제 노드 (요소 일 수도 있고 아닐 수도 있음)를 제공하는 previousSibling이 있습니다. 그래서 :

는 findPrevious은 다음과 같습니다

function swapDiv(elm) { 
    var previous = findPrevious(elm); 
    if (previous) { 
     elm.parentNode.insertBefore(elm, previous); 
    } 
} 

은 ... :

function findPrevious(elm) { 
    do { 
     elm = elm.previousSibling; 
    } while (elm && elm.nodeType != 1); 
    return elm; 
} 

... 당신의 onclick 속성이 있어야 할 곳에 :

onclick="swapDiv(this);" 

... 당신이 할 수 있지만, 대신 DOM2 이벤트 후킹 (IE에서는 addEventListener 또는 attachEvent)을 조사하십시오.

약간 OT,하지만 난 당신의 인생을 더 쉽게 사용할 수있는 몇 가지 라이브러리 중 하나를 사용하는 것이 좋습니다 수 있습니다, 같은 Prototype, jQuery, Closure, 또는 any of several others있다. 사실 DOM의 직접 처리 이후로 이 길었 기 때문에 이전 버전에서는 오류가있었습니다. :-)

Answer 4

원칙적으로 이전 요소 형제보다 클릭 한 요소가 insertBefore입니다. 그러나 공백 텍스트 노드가 있으면 전통적인 스크립팅보다 성가신 텍스트 노드가됩니다.

<div id="container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</div> 

<script type="text/javascript"> 
    // Bind event to each line div 
    // 
    var div= firstElementChild(document.getElementById('container')); 
    while (div!==null) { 
     div.onclick= swapWithPreviousElement; 
     div= nextElementSibling(div); 
    } 

    // Move element before its previous element sibling 
    // 
    function swapWithPreviousElement() { 
     var previous= previousElementSibling(this); 
     if (previous!==null) 
      this.parentNode.insertBefore(this, previous); 
    } 


    // We've used some Element Traversal API methods but some 
    // browsers don't support them yet. Provide wrapper functions 
    // for compatibility. 
    // 
    function previousElementSibling(element) { 
     if ('previousElementSibling' in element) 
      return element.previousElementSibling; 
     do 
      element= element.previousSibling; 
     while (element!==null && element.nodeType!==1); 
     return element; 
    } 
    function nextElementSibling(element) { 
     if ('nextElementSibling' in element) 
      return element.nextElementSibling; 
     do 
      element= element.nextSibling; 
     while (element!==null && element.nodeType!==1); 
     return element; 
    } 
    function firstElementChild(element) { 
     if ('firstElementChild' in element) 
      return element.firstElementChild; 
     var child= element.firstChild; 
     while (child!==null && child.nodeType!==1) 
      child= child.nextSibling; 
     return child; 
    } 
</script> 

Answer 5

스왑 어떤 노드 : Element Traversal API이 쉽게 만들 것입니다,하지만 더 널리 브라우저에서 지원 될 때까지 도우미 기능, 예를 필요하지 형제 자매, adjecent하지 형제, 아니 임시 노드없이 복제, jquery가 없습니다 ... IE9 +

function swapNodes(n1, n2) { 

    var p1 = n1.parentNode; 
    var p2 = n2.parentNode; 
    var i1, i2; 

    if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return; 

    for (var i = 0; i < p1.children.length; i++) { 
     if (p1.children[i].isEqualNode(n1)) { 
      i1 = i; 
     } 
    } 
    for (var i = 0; i < p2.children.length; i++) { 
     if (p2.children[i].isEqualNode(n2)) { 
      i2 = i; 
     } 
    } 

    if (p1.isEqualNode(p2) && i1 < i2) { 
     i2++; 
    } 
    p1.insertBefore(n2, p1.children[i1]); 
    p2.insertBefore(n1, p2.children[i2]); 
}