JavaScript를 깨지 않고 JQuery로 한 div에서 다른 div로 HTML을 이동하는 방법

Question

내 웹 페이지의 다른 섹션 인 작동 및 참조 섹션에 두 개의 div가 있습니다. 하나는 고정 크기이고 다른 하나는 가변 크기이며 수직으로 쌓입니다. 참조 창에서 작업 할 경우 링크를 클릭하면 두 창 사이의 모든 데이터를 서로 바꿀 수 있도록 디자인하려고합니다. 내 생각은 다음을 수행 :이와

var working = $("#working_pane").html(); 
var ref = $("#reference_pane").html(); 

$("#working_pane").html(ref); 
$("#reference_pane").html(working); 

문제,이 창 내부에 참조 된 자바 스크립트 (예를 들어, 장소 편집기에서)이 전환에 깨진받을 것으로 보인다이다. 자바 스크립트 오류가 발생하지 않습니다. 자바 스크립트 타이가 깨진 것처럼 아무 일도 일어나지 않습니다.

javascript를 포함하지 않고 html을 이동하려면 어떤 것이 있습니까?

Answer 1

HTML 문서의 비트로 작업 할 때 이 인 Node 객체로 작업해야합니다. 브라우저에는 HTML 문자열이 아닌 내용이 표시됩니다.

HTML을 얻으려면 브라우저가 노드를보고이를 문자열로 serialize해야합니다. 그런 다음 해당 HTML을 문서의 다른 부분 (innerHTML 또는 jQuery html(...))에 할당하면 이전에 요소에 있었던 모든 내용을 삭제하도록 브라우저에 지시하고 HTML 문자열을 새로운 노드 객체 집합으로 힘들게 구문 분석합니다 ,이 새로운 노드를 요소에 삽입하십시오.

이 느린 낭비이며, 같은 일련 HTML로 표현할 수없는 원래의 노드 객체의 모든 측면 손실 : 당신의 편집자는 왜

• 이벤트 핸들러 함수/리스너 (속보)
• 변수 참조 다른 자바 스크립트 코드는 노드 (또한 스크립트를 나누기)에있다를 제외하고, 부분적으로, IE의 버그로 인해
• 양식 필드 값()
• 사용자 지정 속성

그래서 이것은 jQuery 또는 일반 DOM을 사용하든 상관없이 적용됩니다. HTML을 던지지 마십시오! 원래 노드 객체를 가져 와서 원하는 위치에 삽입하십시오. 원래 객체는 자동으로 원래 위치에 남습니다. 스크립트가 계속 작동하도록 참조가 그대로 유지됩니다.

// contents() gives you a list of element and text node children 
var working = $("#working_pane").contents(); 
var ref = $("#reference_pane").contents(); 

// append can be given a list of nodes to append instead of HTML text 
$("#working_pane").append(ref); 
$("#reference_pane").append(working); 

Answer 2

중복 ID로 인해 발생할 수 있습니다. 기본적으로 id = id1 인 div에 요소 a가있을 수 있습니다. 이제 var에 저장되고 새 div에 주입됩니다. 현재 현재 중복 ID가 없는지 확인하기위한 메커니즘이없는 것으로 보입니다. 이것은 js를 깨뜨릴 수 있습니다

요소를 먼저 var에 저장했는지 확인한 다음 원본을 제거한 다음 새 위치에 추가합니다.