2011-12-22 13 views
15

Tôi có một câu hỏi đơn giản tại đây. Tôi biết với jQuery bạn có thể tự động thêm các phần tử HTML trong DOM bằng cách làm những thứ như thếThay đổi jQuery DOM không xuất hiện trong nguồn xem

$('').append('<p>Test</p>'); 

Nhưng câu hỏi của tôi là, tại sao bạn không những yếu tố này thực sự xuất hiện trực quan trong các mã (khi bạn View Source trong trình duyệt của bạn thí dụ).

Xin vui lòng cho chuyên gia, cho tôi biết lý do. Cảm ơn

+0

Sử dụng [firebug] (http://getfirebug.com/) thay vào đó .. –

+0

Cảm ơn, firebug được awesone. Cảm ơn tất cả mọi người vì những câu trả lời hay nhất – user765368

Trả lời

22

Nguồn ban đầu không bao giờ thay đổi. Chỉ những thay đổi của DOM.

Bạn có thể thấy hình ảnh HTML về các thay đổi DOM bằng cách sử dụng các công cụ dành cho nhà phát triển của trình duyệt của bạn.

Bạn nên lưu ý rằng khi bạn thao tác DOM, bạn sẽ không bao giờ thao túng HTML. Hình ảnh hóa HTML được cung cấp bởi công cụ nhà phát triển là một cách giải thích của trạng thái hiện tại của DOM. Không có thay đổi thực sự nào về đánh dấu HTML.

+4

+1 nhưng điều gì về các rô-bốt của các công cụ tìm kiếm như Google? Là nội dung này mà tôi ví dụ tải thông qua ajax GET từ một số phần còn lại api có thể nhìn thấy? – andi

+0

đây cũng là câu hỏi của tôi? làm sao? @andi –

7

Vì Nguồn xem chỉ hiển thị HTML đã được gửi đến trình duyệt ban đầu. Có nhiều cách nhìn thấy HTML thay đổi mặc dù - Firebug trong Firefox, các công cụ phát triển F12 trong IE hoặc Chrome. Chọn một số HTML và nhấp chuột phải vào "View Selection Source" trong Firefox cũng sẽ hoạt động.

4

"Nguồn xem" chỉ hiển thị nguồn máy chủ được gửi tại thời điểm trình duyệt yêu cầu trang web cụ thể từ máy chủ. Do đó, vì những thay đổi này được thực hiện ở phía khách hàng, chúng không hiển thị trên "Nguồn xem" vì chúng đã được tạo sau khi trang gốc đã được phân phối.

Để xem nguồn trực tiếp của trang, bạn có thể sử dụng chế độ xem Trình theo dõi web trong trình duyệt webkit hoặc Firebug trong Firefox. Chúng theo dõi mọi thay đổi đối với DOM và cập nhật nguồn mà bạn có thể thấy.

0

Có những lúc các công cụ phát triển trong IE/Firefox/Chrome không theo kịp với DOM của bạn. Điều đó chỉ có nghĩa là bạn đang đối phó với một số mã xứng đáng với một Jedi - hoặc Darth Vader để nó ở đó để bạn gỡ lỗi.

+0

Giống như khi nào? Tôi đang cập nhật một biểu mẫu chọn với jquery.chosen và không thấy html gốc thay đổi trong Chrome devtools, mặc dù nếu tôi kiểm tra phần tử '$ ('. My-select')' trong bảng điều khiển, tôi thấy rằng giá trị hiện tại là chính xác… – ptim

+0

Tôi nhận được hành vi này khi javascript được chèn động vào trang như một phần của tải trọng ajax. – BraveNewMath

3

Có tùy chọn trong công cụ nhà phát triển web (Firefox addon) "View generated source" sẽ cung cấp cho bạn toàn bộ mã nguồn được tạo sau khi bạn thực hiện thay đổi.

view source->View generated source 
Các vấn đề liên quan