2010-12-28 3 views
1

나는이 목록 상자와 다음을 수행 일부 JQuery와 기능을 가지고 :AppendTo, DOM이 바뀌나요?

$(document).ready(function() { 
    //If you want to move selected item from fromListBox to toListBox 
    $("#AddButton").click(function() { 
     $("#fromListBox option:selected").appendTo("#toListBox"); 
    }); 
}); 

나는 버튼이 그 다른 하나의 목록에서 이동 항목을 클릭하면. 하지만 크롬에서 "페이지 소스보기"를 수행하면 목록에 새로 추가 된 항목이 아닌 원래 목록이 포함됩니다.

appendTo가 DOM을 변경할 것으로 예상했지만 분명히 일어나고있는 것은 아닙니다. 왜 이런거야?

JD

+2

DOM! = 페이지 소스 – Shikiryu

답변

5

예, appendTo는 DOM을 수정합니다. 그러나 "소스보기"를 수행하면 이 아니며은 DOM의 현재 상태 버전이지만 원래 HTML 소스 코드가 다시 검색된 (또는 캐시 된) 버전입니다. , 살지 않는다).

파이어 폭스와
  • 은 방화범의 HTML 탭을 (이름은 약간 오해의 소지가) 사용

    는 DOM에 대한 변경 사항을 확인하려면, 당신은 것을 수행하는 도구를 사용해야합니다.
  • Chrome 또는 Safari의 경우 "개발 도구"의 "요소"탭을 사용하십시오. (Dev Tools는 Chrome에서 Ctrl + Shift + I이며 두 브라우저 모두 오른쪽 상단의 공구 모양 메뉴에서 사용할 수 있습니다. 환경 설정에서 사용 설정해야 할 수 있습니다.)
  • IE에서는 무료 버전의 VS.Net.
  • Opera에서 Dragonfly (보기 | 개발자 도구 | 잠자리) DOM 탭을 사용하십시오. 크롬, 사파리, 오페라에서

(적어도 에서) 당신이 요소를 마우스 오른쪽 버튼으로 클릭하면, 거기에 내장 된 도구를 직접 열어 상황에 맞는 메뉴에서 옵션 "요소 검사"; Firebug의 최신 버전은 Firefox에서도 똑같이 작동한다고 생각합니다.

+0

의 실행 상태를보고 파이어 폭스 방화범을 사용할 수있다 _DragonFly_하지? – Shikiryu

+0

@ClemDesm : 방금 해고하고 대답을 편집했습니다. :-) –

+0

@ T.J 그리고 어떻게 스크립트로 만들 수 있습니까? – Zulu

1

appendTo는 DOM을 변경합니다. 소스를 볼 때 변경 사항이 표시되지 않습니다. 변경 사항을 확인하려면 개발자 툴바를 사용하여 DOM을 탐색해야합니다.

0

"소스보기"는 처음에 브라우저에서 렌더링 한 원본 HTML 버전입니다.

자바를 통해 수행되는 DOM의 변경 사항은 메모리에 있으며 소스보기를 클릭하면 반영되지 않습니다. 당신이 DOM에 대한 변경 사항을 확인하려면

, 당신이 오페라를 들어 DOM

관련 문제