두 번째 노드에서 첫 번째 노드로 이동

Question

두 번째 노드를 첫 번째 노드로 이동시키는 기능을 원합니다.하지만 작동하지 않습니다.

var node = document.getElementById("ir"); 
    var cx = node.childNodes[1]; 
    function der(){ 
    node.insertBefore(cx,node.firstChild); 
} 

fullcode :

<div id="ir"> 
<p id="ie">test</p> 
<img src="test.gif"> 
</div> 

<script type="text/Javascript"> 
var node = document.getElementById("ir"); 
img.setAttribute("onclick","der()"); 
var cx = node.childNodes[1]; 
function der(){ 
     node.insertBefore(cx,node.previousSibling); 
} 

Answer 1

나는 조금 느린 오늘 해요,하지만 난 previousSibling은의 사용이 잘못 생각합니다. 부모 노드가 아닌 자식 노드 cx와 관련이 있어야한다고 생각합니다. 그래서 node.previousSibling이 아닌 cx.previousSibling을 사용해야합니다. 이전 예제를 편집하여 이전의 벙어리 응답을 제거했습니다 ... 시도해보십시오.

<div id="ir"> 
<p id="ie">test</p> 
<img src="test.gif"> 
</div> 

<script type="text/Javascript"> 
var node = document.getElementById("ir"); 
img.setAttribute("onclick","der()"); 
var cx = node.childNodes[1]; 
function der(){ 
    node.insertBefore(cx,cx.previousSibling); 
} 

2 일 후 편집! .... 물론 위 예제는 이미지의 실제 previousSibling이/P 태그 클로저와 이미지 사이의 개행 문자이기 때문에 P 엘리먼트와 이미지를 교환하지 않습니다.

<script> 
function swapDivs(obj) { 
    if(obj.previousSibling){ // if it's null, then it's already the first element // 
    obj.parentNode.insertBefore(obj, obj.previousSibling); 
    } 
} 
</script> 

<div id="ir"> 
    <p id="ie">test</p><img src="http://i2.ifrm.com/4639/142/emo/drool.gif" onclick="swapDivs(this);" /> 
</div> 

그것은를 해결하지 않습니다 'IMG'어디서나 정의라는 목적이 없기 때문에 더 중요한 코딩 관점에서, 그것은 내가 일하는 대안으로이를 제공합니다 ... 작동하지 않습니다 개행 문제, 방금 HTML을 다시 형식화했습니다.

그러나 img 문제를 해결하고 함수를 사용자 정의 할 필요없이 클릭 가능한 DOM 객체에 함수를 추가하는 일반적인 방법을 제공합니다.

줄 바꿈/공백 문자 형제로 문제를 해결하는 방법을 배우 겠지만, 어렵지 않아야합니다. 여기

Answer 2

http://jsfiddle.net/joeframbach/JSZPy/

그 바이올린의 HTML에 문제 http://jsfiddle.net/radiotrib/ps9XZ/는 공간입니다 ... 당신이 당신의 시도를 테스트하려는 경우와 재생하는 바이올린입니다. childNodes[0]은 첫 번째 공백 집합과 일치하고 childNodes[1]은 첫 번째 요소와 일치합니다. 아마도 이것은 당신의 문제입니다.

<div id="ir"> 
    <p>First</p> 
    <p>Second</p> 
</div> 

var node = document.getElementById("ir"); 
var first = node.childNodes[1]; 
var second = node.childNodes[3]; 
node.insertBefore(second,first); 

Answer 3

당신은 해답을 가지고 있지만, 내가 좋아하는 뭔가 일을하는 것이 좋습니다 : 그들은 텍스트 타입의 아이처럼 생각하고 있기 때문에, 당신이 childNodes에 작업 공간이나 브레이크 라인을 넣어하지 조언

var node = document.getElementById("ir"); 
var childs = node.getElementsByTagName("div"); 
var cx = childs[1]; 

function der() 
{ 
    node.removeChild(cx); 
    node.insertBefore(cx, childs[0]); 
} 

der(); 

Answer 4

을 . 이 코드는 당신을 도울 것입니다 희망 : 자바 스크립트 코드 :

function change(){ 
    var parent = document.getElementById("ir"); 
    var img = parent.childNodes[1]; 
    parent.removeChild(img); 
    parent.insertBefore(img, parent.firstChild); 
} 

HTML 코드 :

<div id="ir"><p id="ie">test</p><img src="test.gif"></div> 
<button onclick="change()">Change</button>